Buenos días:
Tengo un código en ajax para el clásico "autocompletar" de un campo texto. Funciona bien y me permite seleccionar el elemento deseado y listo. Sin embargo le he encontrado un pequeño "bug".
Mientras estoy escribiendo el dato a buscar, la función me muestra el listado en un div. Hasta ahí normal. Sin embargo, si retiro el foco de ese campo, es decir activo el evento onBlur, el listado sigue presente y lo que deseo es que desaparezca.
Este es el código Ajax que utilizo
Cita: var xmlHttp
function showHint(str,n)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
document.getElementById("txtHint").style.visibilit y="hidden";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Su navegador no soporta AJAX");
return;
}
var url="datos.asp";
url=url+"?q="+str;
url=url+"&modelo="+n;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHt tp.responseText;
if(xmlHttp.responseText=="ND")
{document.getElementById("txtHint").style.visibili ty="hidden";}
else
{document.getElementById("txtHint").style.visibili ty="visible";}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e)
{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlHttp;
}
function selectItem(nombre)
{
document.getElementById("txtHint").style.visibilit y="hidden";
document.getElementById("txt1").value="";
document.registros.persona.value=nombre;
}
Obviamente la página datos.asp es la encargada de conectarse con la base de datos y muestra el listado. Y en la función selectItem, cierro el listado, limpio el campo texto utilizado para el autocompletar y "escribo" el dato seleccionado en el campo llamado persona.
Pero como les digo, si quito el foco del campo txtHint (es el ID del campo de texto que uso para la función autocompletar) el listado se queda visible.
Probé la opción más lógica, creo, y fue agregar una función al evento onBlur del campo texto que uso para el autocompletar, de esta forma (la función acceptNum(event) es para controlar que sólo se ingresen números, no afecta para nada a la función Ajax):
Cita: <input type="text" ID="txt1" size="11" maxlength="11" onKeyUp="showHint(this.value,1)" onKeyPress="return acceptNum(event);" onBlur="cerrarListado();">
y la función para el eventon onBlur es
Cita: function cerrarListado()
{
document.getElementById("txtHint").style.visibilit y="hidden";
document.getElementById("txt1").value="";
}
Funciona, pero ya me di cuenta de que si tengo el listado abierto y selecciono un elemento, pues no lo llega a seleccionar, y eso porque al hacer clic en en listado estoy activando primero el evento onBlur.
He probado varias modificaciones como el que el evento onBlur active una función que primero determine si se ha llenado un campo (en este caso el campo persona), pero nada, siempre que tengo el listado y selecciono un elemento, se cierra todo y no lo selecciona al final de cuentas.
¿Alguna idea?. Espero haberme explicado bien.
Un saludo desde Lima, Perú