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);
}
}
}
}
}
}

Re: Autocompletar <input> AJAX php Mysql
 

function clickLista(elemento)

{
/* Se ejecuta cuando se hace clic en algun elemento de la lista. Se coloca en el input el
valor del elemento clickeado */
v=1;
valor=limpiaPalabra(elemento.innerHTML);
busqueda=valor; inputLista.value=valor;
divLista.style.display="none"; elemento.className="normal";
}

function mouseFuera()
{
// Des-selecciono el elemento actualmente seleccionado, si es que hay alguno
if(elementoSeleccionado!=0 && document.getElementById(elementoSeleccionado)) document.getElementById(elementoSeleccionado).clas sName="normal";
}

function mouseDentro(elemento)
{
mouseFuera();
elemento.className="resaltado";
// Establezco el nuevo elemento seleccionado
elementoSeleccionado=elemento.id;
}

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

me funciona perfectamente.

Ahora dentro del formulario hay un botón que lo que me hace es añadir una fila a la tabla:

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

var l=2;
function añade_fila()
{
var objTabla = document.getElementById("t2");
var objTbody=objTabla.firstChild;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas

objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"9\" maxlength=\"10\" name =\"co_cta[]"+l+"\" >";
objNuevaFila.childNodes[1].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"9\" maxlength=\"10\" name =\"co_cco[]"+l+"\" >";
objNuevaFila.childNodes[2].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"70\" maxlength=\"70\" name =\"de_ref[]"+l+"\" >";
objNuevaFila.childNodes[3].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"13\" maxlength=\"13\" name =\"im_mov[]"+l+"\" >";
objNuevaFila.childNodes[4].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"1\" maxlength=\"1\" name =\"co_dh[]"+l+"\" >";
objTbody.appendChild(objNuevaFila);
l++;
}

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

Aki sigo que no me dejaba escribir un post tan largo... ;)

Funciona bien, pero el problema que al añadir la fila nueva el input "name=co_cta[]" ya no hace la funcion de autocompletar. He estado intentando modificar la función "añade_fila()" anterior pero me da error cada vez q toko una comilla!!.
Seguramente habrá que añadirle algo a esta funcion para que al insertar esta nueva fila tb haga la función de autocompletar..

Por favor a ver si alguien puede ayudarme y muchas gracias...

Re: Autocompletar <input> AJAX php Mysql
 

Lo siento no se si me explique bien :) anteriormente.... voy a intentar explicarlo un "pelin" mejor:

Resulta que a una tabla le añado filas dinamicamente y en una de sus filas un <td><input> hace la función de autocompletar de ajax consultando una base de datos.

Esta función me funciona cuando imprimo por primera vez la tabla. Al añadir una nueva fila ya no me hace la función de autocompletar.

Pongo la funcion de añadir fila que tengo:

//******************************************//
var l=2;
function añade_fila()
{
var objTabla = document.getElementById("comp");
var objTbody=objTabla.firstChild;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas

objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" id=\"input_2\" class=\"input\" size=\"9\" maxlength=\"10\" name =\"co_cta[]"+l+"\" >";
objNuevaFila.childNodes[1].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"9\" maxlength=\"10\" name =\"co_cco[]"+l+"\" >";
objNuevaFila.childNodes[2].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"70\" maxlength=\"70\" name =\"de_ref[]"+l+"\" >";
objNuevaFila.childNodes[3].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"13\" maxlength=\"13\" name =\"im_mov[]"+l+"\" >";
objNuevaFila.childNodes[4].innerHTML = "<input type =\"text\" class=\"arial11\" size=\"1\" maxlength=\"1\" name =\"co_dh[]"+l+"\" >";
objTbody.appendChild(objNuevaFila);
l++;
}
//******************************************//

Y este el <td> que se imprime por primera vez en la tabla que si que funciona la función de AJAX:

//******************************************//
<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>

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

Re: Autocompletar <input> AJAX php Mysql
 

2º parte de mi pregunta

--------------------------------------------------------------------------------
Creo que en la función añade_fila() en este apartado:

//******************************************//
objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" id=\"input_2\" class=\"input\" size=\"9\" maxlength=\"10\" name =\"co_cta[]"+l+"\" >";
//******************************************//

Es donde hay que añadir esto, pero no se como tokarlo si pudierais ayudarme!

//******************************************//
esto: 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'; }" ..............................
//******************************************//

Muchas gracias!!

Respuesta: Autocompletar <input> AJAX php Mysql
 

Por algo no te respondieron...no se entiende nada.