Esta es la imagen del formulario:
En este ejemplo...solo para la primera línea.. o sea la del CSR 80200 funciona el autocompletar....pero al seguir con el resto de los registros de abajo (del campo modelo) no funciona.....
Este es el código del formulario:
Ingreso.asp
Código ASP:
Ver original
<% if Not IsEmpty(Request("distribuidor")) then DISTRIBUIDOR = Request("distribuidor") end if if Not IsEmpty(Request("loc")) then LOC = Request("loc") end if if Not IsEmpty(Request("guia_d")) then GUIA_D = Request("guia_d") end if if Not IsEmpty(Request("cod_auto")) then COD_AUTO = Request("cod_auto") end if CANTIDAD =Trim ( cdbl(Request("cantidad")) ) CSR_INI =Trim ( cdbl(Request("csr_ini")) ) Actual = date() Set Cnn = Server.CreateObject( "ADODB.Connection" ) Set RS = Server.CreateObject( "ADODB.Recordset" ) Cnn.Open Session("cnx") strSQL="SELECT distribuidor FROM Distribuidores where idDistribuidor='"&distribuidor&"'" set rs = Cnn.Execute(strSQL) distribuidor = rs.Fields("distribuidor") strSQL = "SELECT ( "&CSR_INI&" + "&CANTIDAD&")-1 as CONTADOR" set rs= Cnn.Execute(strSQL) %> <style type="text/css"> <!-- body { background-image: url(../inventario/images/2x1900.jpg); } --> #contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#black;} #contenedor div.deseleccionado {background:#FFFFFF; color:#000000;} #contenedor div{font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;} .capa { background: #FFFFFF; border:1px solid rgb(120,120,120); width: 150px; _width: 250px; text-align: left; position: absolute; top: 30px; _top:38px; left: 117px; _left: 119px; } </style> <script type="text/javascript"> var SelUsuario = { Evento: function (elemento,nomevento,funcion) { if (elemento.attachEvent) { var f=function(){ funcion.call(elemento,window.event); } elemento.attachEvent('on'+nomevento,f); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,false); return true; } else return false; }, init: function(){ var elem1 = document.getElementById("txt"); var elem2 = document.getElementById("contenedor"); SelUsuario.Evento(elem1, 'keyup', SelUsuario.Empieza); SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar); SelUsuario.Evento(elem1, 'keydown', SelUsuario.Pegar2); SelUsuario.Evento(window, 'click', SelUsuario.Cerrar); }, creaAjax: function (){ var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"]; var ajax = false; for(var i=0 ; !ajax && i<ajaxs.length ; i++){ try{ ajax = new ActiveXObject(ajaxs[i]); // Internet Explorer } catch(e) { ajax = false; } } if(!ajax && typeof XMLHttpRequest!='undefined') { ajax = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } return ajax; }, Empieza: function (ev) { var str = document.getElementById(this.id).value; var obj = document.getElementById("contenedor"); var ref = obj.getElementsByTagName('DIV'); var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0; if (keyCode == 40) { //alert("flecha abajo") SelUsuario.BajaOpt () } else if (keyCode == 38) { //alert("flecha arriba") SelUsuario.SubeOpt () } else if (keyCode == 13) { for (var i = 0; i <= ref.length-1; i++) { if (ref[i].className == "seleccionado") { document.getElementById("txt").value = ref[i].id; if (obj.style.display == "block"); obj.style.display= "none"; break; } } try{ // DOM; ev.preventDefault(); }catch(e){ // iexplore; ev.returnValue = false; } } else { if (str.length < 2) { //obj.innerHTML = ""; if (obj.style.display == "none") obj.style.display= "none"; else obj.style.display= "none"; return; } ajax = SelUsuario.creaAjax() if (ajax==null) { alert ("Tu navegador no soporta Ajax"); return; } var url="sugest/SelecUsuarios.asp?q="+escape(str); ajax.open("GET",url,true); ajax.onreadystatechange = SelUsuario.Despliega; //ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ajax.send(null); return } }, Despliega: function () { var obj = document.getElementById("contenedor"); if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) { obj.innerHTML = "<p align='center'><img src='../images/cargando.gif' border='0px' widht='15px' height='15px'/></p>"; obj.style.display= "block"; } else if (ajax.readyState==4) { if (ajax.status==200) { obj.innerHTML = unescape(ajax.responseText); }else { obj.innerHTML = "<p>Se ha producido un error</p>"; } if (obj.style.display == "none") obj.style.display= "block"; } }, Seleccionar: function () { var ref = document.getElementById(this.id).getElementsByTagName('DIV'); //alert(ref); for (var i = 0; i < ref.length; i++) { SelUsuario.Evento(ref[i], 'click', function() { SelUsuario.Pegar(this.id); //alert(this.id); }) SelUsuario.Evento(ref[i], 'mouseover', function() { SelUsuario.Marcar(this.id); }) //SelUsuario.Evento(ref[i], 'mouseout', function() { //SelUsuario.DesMarcar(this.id); //}) } }, Pegar: function (valor) { //alert("el val " +valor); var obj = document.getElementById("contenedor") document.getElementById("txt").value = valor; if (obj.style.display == "block"); obj.style.display= "none"; }, Pegar2: function (ev) { var obj = document.getElementById("contenedor") var ref = obj.getElementsByTagName('DIV'); var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0; // enter 13 tab 9 if ((keyCode == 13) || (keyCode == 9)) { //alert("enter") for (var i = 0; i <= ref.length-1; i++) { if (ref[i].className == "seleccionado") { document.getElementById("txt").value = ref[i].id; //window.focus(); if (obj.style.display == "block"); obj.style.display= "none"; break; //alert(ref[i].id); } } if (keyCode == 13) { try{ // DOM; ev.preventDefault(); }catch(e){ // iexplore; ev.returnValue = false; } } } }, BajaOpt: function() { var ref = document.getElementById("contenedor").getElementsByTagName('DIV'); for (var i = 0; i <= ref.length-1; i++) { if (ref[i].className == "seleccionado") { ref[i].className = "deseleccionado"; if (i < ref.length-1){ i++; }else{ i = 0; } //alert("Largo: " +(ref.length-1)+ " Valor: " +i); ref[i].className = "seleccionado" } } }, SubeOpt: function() { var ref = document.getElementById("contenedor").getElementsByTagName('DIV'); for (var i = 0; i <= ref.length-1; i++) { if (ref[i].className == "seleccionado") { ref[i].className = "deseleccionado"; if (i < ref.length && i > 0){ i--; }else{ i = ref.length-1; } //alert("Largo: " +(ref.length-1)+ " Valor: " +i); ref[i].className = "seleccionado" } } }, Marcar: function (id) { var selecionado = document.getElementById(id); var ref = document.getElementById("contenedor").getElementsByTagName('DIV'); for (var i = 0; i <= ref.length-1; i++) { if (ref[i].id != id) { ref[i].className = "deseleccionado"; selecionado.className = "seleccionado"; } } }, //DesMarcar: function (id) { //var ref = document.getElementById(id); //alert(ref); //ref.className = "deseleccionado" //alert("el " +id); //}, Cerrar: function () { var obj = document.getElementById("contenedor") if (obj.style.display == "block"); obj.style.display= "none"; } } SelUsuario.Evento(window, 'load', SelUsuario.init); </script> <form> <table width="430" height="103" border="1" align="center" bordercolor="#0000FF"> <tr> <td width="213"><p>Distribuidor: <%=response.write (""&DISTRIBUIDOR&"") %></p> <p>Local: <%=response.write (""&LOC&"") %></p> <p>Fecha: <%=response.write (""&ACTUAL&"") %></p></td> <td width="130"><p>Guía de Despacho </p><p>Nº: <%=response.write (""&GUIA_D&"") %></p></td> </tr> </table> <p align="center"> </p> <%For cuen = ""&CSR_INI&"" To ""&rs("CONTADOR")&"" Step 1%> <table width="351" border="1" align="center" bordercolor="#0000FF"> <tr> <td>Sel</td> <td width="36">Csr:</td> <td width="70">Modelo:</td> <td width="47">Serie:</td> <td width="170">Comentarios:</td> </tr> <tr> <td width="21"><input type="checkbox" name="cod" value="" tabindex="1" ></td> <td height="55"><input name="csr" readonly="readonly" size="3" value=<%=response.write (""&cuen&"") %> tabindex="2"></td> <td><input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="3"></td> <div id="contenedor" class="capa" class="vink" style="margin:5px 0px 0px 10px"> <div id="contenedor" class="capa" style="display:none;"></div></div> <td><input name="serie" tabindex="4"></td> <td><textarea name="comentarios" cols="30" rows="3" wrap="VIRTUAL" tabindex="5"></textarea></td> </tr> </table> <%next%> <p align="center"> </p> </form>