Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/05/2008, 10:38
danielico3
 
Fecha de Ingreso: abril-2008
Ubicación: España
Mensajes: 58
Antigüedad: 16 años, 7 meses
Puntos: 1
Autocompletar <input> AJAX php Mysql

Hola Buenas tengo un pequeño problemilla que quizas alguien pueda hecharme una mano... quizas no sea muy complicado.

Resulta que he ido recogiendo trozos de códigos de esta web y de otras web para el desarrollo de un programilla que estoy haciendo.

Al cargar la página en cuestión cargo un formulario. que contiene entre otras lineas estas lineas:

///************************************************** *****///


<DIV id="comp">

<table width="709" border="1" align="center" background="imagenes/fondo_raya_azul.gif" class="arial12" id = "t2">

<tr align="center">
<td width="106"><strong>Cuenta</strong></td>
<td width="106"><strong>Contrapartida</strong></td>
<td width="362"><strong>Explicación</strong></td>
<td width="77"><strong>Importe</strong></td>
<td width="24"><strong>D/H</strong></td>
</tr>

<tr>
<td>
<div id="demo" style="width:20px;">
<div id="demoDer">
<input name="co_cta[]" type="text" id="input_2" class="input" value="" size=9 maxlength=10
onfocus="if(document.getElementById('lista').child Nodes[0]!=null && this.value!='') { filtraLista(this.value);
formateaLista(this.value);
reiniciaSeleccion(); document.getElementById('lista').style.display='bl ock'; }"

onblur="if(v==1) document.getElementById('lista').style.display='no ne';"

onkeyup="if(navegaTeclado(event)==1) {
clearTimeout(ultimoIdentificador);
ultimoIdentificador=setTimeout('rellenaLista()', 1000); }">

<div id="lista" onMouseOut="v=1;" onMouseOver="v=0;"></div>
</div>
<div class="mensaje" id="error"></div>
</div>
</td>

<td><input name="co_cco[]" type="text" class="arial11" value="" size=9 maxlength=10>&nbsp;</td>
<td><input name="de_ref[]" type="text" class="arial11" value="" size=70 maxlength=70>&nbsp;</td>
<td><input name="im_mov[]" type="text" class="arial11" value="" size=13 maxlength=13>&nbsp;</td>
<td><input name="co_dh[]" type="text" class="arial11" value="" size=1 maxlength=1>&nbsp;</td>
</tr>

</table>

<table align="center">
<tr>
<td><INPUT name="button" class="boton" TYPE="button" STYLE="background: #99CCFF; color: #000000" onClick="return limpia();" VALUE="Limpiar"></td>
<tD><input type="button" class="boton" value="Añadir movimiento" STYLE="background: #99CCFF; color: #000000" onClick="añade_fila();"></tD>
<td><INPUT name="button" class="boton" TYPE="button" STYLE="background: #99CCFF; color: #000000" onClick="grabar_asiento();" VALUE="Grabar"></td>

</tr>
</table>

///************************************************** ***///

En el <input name="co_cta[]"> utiliza la funcion de autocompletar de ajax que es esta:

///************************************************** ********///

function asignaVariables()
{
// Funcion que asigna variables que se usan a lo largo de las funciones
v=1; nuevaBusqueda=1; busqueda=null; ultimaBusquedaNula=null;
divLista=document.getElementById("lista");
inputLista=document.getElementById("input_2");
elementoSeleccionado=0;
ultimoIdentificador=0;
}

function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }

return xmlhttp;
}

function eliminaEspacios(cadena)
{
var x=0, y=cadena.length-1;
while(cadena.charAt(x)==" ") x++;
while(cadena.charAt(y)==" ") y--;
return cadena.substr(x, y-x+1);
}


function formateaLista(valor)
{
// Funcion encargada de ir colocando en negrita las palabras y asignarle un ID a los elementos
var x=0, verificaExpresion=new RegExp("^("+valor+")", "i");

while(divLista.childNodes[x]!=null)
{
// Asigo el ID para reconocerlo cuando se navega con el teclado
divLista.childNodes[x].id=x+1;
// Coloco en cada elemento de la lista en negrita lo que se haya ingresado en el input
divLista.childNodes[x].innerHTML=divLista.childNodes[x].innerHTML.replace(verificaExpresion, "<b>$1</b>");
x++;
}
}

function limpiaPalabra(palabra)
{
// Funcion encargada de sacarle el codigo HTML de la negrita a las palabras
palabra=palabra.replace(/<b>/i, "");
palabra=palabra.replace(/<\/b>/i, "");
return palabra;
}

function coincideBusqueda(palabraEntera, primerasLetras)
{
/* Funcion para verificar que las primeras letras de busquedaActual sean iguales al
contenido de busquedaAnterior. Se devuelve 1 si la verificacion es afirmativa */
if(primerasLetras==null) return 0;
var verificaExpresion=new RegExp("^("+primerasLetras+")", "i");
if(verificaExpresion.test(palabraEntera)) return 1;
else return 0;
}

function nuevaCadenaNula(valor)
{
/* Seteo cual fue la ultima busqueda que no arrojo resultados siempre y cuando la cadena
nueva no comience con las letras de la ultima cadena que no arrojo resultados */
if(coincideBusqueda(valor, ultimaBusquedaNula)==0) ultimaBusquedaNula=valor;
}

function busquedaEnBD()
{
/* Funcion encargada de verificar si hay que buscar el nuevo valor ingresado en la base
de datos en funcion de los resultados obtenidos en la ultima busqueda y en base a que
la cadena bsucada anteriormente este dentro de la nueva cadena */
var valor=inputLista.value;

if((coincideBusqueda(valor, busqueda)==1 && nuevaBusqueda==0) || coincideBusqueda(valor, ultimaBusquedaNula)==1) return 0;
else return 1;
}

function filtraLista(valor)
{
// Funcion encargada de modificar la lista de nombres en base a la nueva busqueda
var x=0;

while(divLista.childNodes[x]!=null)
{
// Saco la negrita a los elementos del listado
divLista.childNodes[x].innerHTML=limpiaPalabra(divLista.childNodes[x].innerHTML);
if(coincideBusqueda(limpiaPalabra(divLista.childNo des[x].innerHTML), valor)==0)
{
/* Si remuevo el elemento x, el elemento posterior pasa a ocupar la posicion de
x, entonces quedaria sin revisar. Por eso disminuyo 1 valor a x */
divLista.removeChild(divLista.childNodes[x]);
x--;
}
x++;
}
}

function reiniciaSeleccion()
{
mouseFuera();
elementoSeleccionado=0;
}

function navegaTeclado(evento)
{
var teclaPresionada=(document.all) ? evento.keyCode : evento.which;

switch(teclaPresionada)
{
case 40:
if(elementoSeleccionado<divLista.childNodes.length )
{
mouseDentro(document.getElementById(parseInt(eleme ntoSeleccionado)+1));
}
return 0;

case 38:
if(elementoSeleccionado>1)
{
mouseDentro(document.getElementById(parseInt(eleme ntoSeleccionado)-1));
}
return 0;

case 13:
if(divLista.style.display=="block" && elementoSeleccionado!=0)
{
clickLista(document.getElementById(elementoSelecci onado))
}
return 0;

default: return 1;
}
}

function rellenaLista()
{
var valor=inputLista.value;

// Valido con una expresion regular el contenido de lo que el usuario ingresa
var reg=/(^[a-zA-Z0-9.@ ]{2,40}$)/;
if(!reg.test(valor)) divLista.style.display="none";
else
{
if(busquedaEnBD()==0)
{
// Si no hay que buscar el valor en la BD
busqueda=valor;

// Hago el filtrado de la nueva cadena ingresada
filtraLista(valor);
// Si no quedan elementos para mostrar en la lista
if(divLista.childNodes[0]==null) { divLista.style.display="none"; nuevaCadenaNula(valor); }
else { reiniciaSeleccion(); formateaLista(valor); }
}
else
{
/* Si se necesita verificar la base de datos, guardo el patron de busqueda con el que se
busco y luego recibo en una variable si existen mas resultados de los que se van a mostrar */
busqueda=valor;

var ajax=nuevoAjax();
ajax.open("POST", "index_proceso.php?", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("busqueda="+valor);

ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if(!ajax.responseText) { divLista.style.display="none"; }
else
{
var respuesta=new Array(2);
respuesta=ajax.responseText.split("&");

/* Obtengo un valor que representa si tengo que ir a BD en las proximas
busquedas con cadena similar */
nuevaBusqueda=respuesta[0];

// Si se obtuvieron datos los muestro
if(respuesta[1]!="vacio")
{
divLista.style.display="block"; divLista.innerHTML=respuesta[1];
// Coloco en negrita las palabras
reiniciaSeleccion();
formateaLista(valor);
}
// En caso contrario seteo la busqueda actual como una busqueda sin resultados
else nuevaCadenaNula(valor);
}
}
}
}
}
}