Utilizar autocompletado con varios text.

tangela · #1 (**permalink**) 31/01/2009, 14:18

Hola a todos, vereis, he sacado de un libro sobre AJAX (Manual Imprescindible de Ajax, Javier Mellado Domínguez, Anaya Multimedia) un ejemplo para que aparezca una lista recogida de una base de datos para autocompletar los datos que se van introduciendo en el text.
El ejemplo funciona a la perfección y me vendría muy bien para una aplicación de control de la biblioteca del colegio en que trabajo, lo que pasa es que necesito que el mismo proceso se repita en tres campos distintos (diferentes tablas, también) y no tengo ni idea de como implementarlo.

La aplicación la componen tres archivos: autocompletar.html; funciones.js y proceso.php

Os pego las funciones javascript que hacen el trabajo.

Código javascript:

Ver originalfunction asignaVariables()
{
    v=1;
    nuevaBusqueda=1;
    busqueda=null;
    ultimaBusquedaNula=null;
    divLista=document.getElementById("lista");
    inputLista=document.getElementById("input_2");
    elementoSeleccionado=0;
    ultimoIdentificador=0;
}
 
unction rellenaLista()
{
    var valor=inputLista.value;
    var reg=/(^[a-zA-Z0-9]{2,40}$)/;
    if (!reg.test(valor))
    {
        divLista.style.display="none";
    }else{
        if(busquedaEnBD()==0)
        {
            busqueda=valor;
            filtraLista(valor);
            if (divLista.childNodes[0]==null)
            {
                divLista.style.display="none";
                nuevaCadenaNula(valor);
            }else{
                reiniciaSeleccion();
                formateaLista(valor);
            }
        } else{
            busqueda=valor;
            var ajax= nuevoAjax();
            ajax.open("POST", "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("&");
                        nuevaBusqueda=respuesta[0];
                        if (respuesta[1] !="vacio")
                        {
                            divLista.style.display="block";
                            divLista.innerHTML=respuesta[1];
                            reiniciaSeleccion();
                            formateaLista(valor);
                        } else
                        {
                         nuevaCadenaNula(valor);
                        }
                    }   
                }
            }
        }   
    }
}

El código del formulario html es el siguiente:

Código html:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.3w.org/TR/html4/strict.dtd">
<HTML>
<head>
<title> Ejemplo autocompletar</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script type="text/javascript" src="funciones.js"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
    <body onload="asignaVariables();">
        <div id="contenedor">
            <table>
                <tr>
                <td><label id="Nome">Nome: </label></td>
                <td>
                <input name="Nome" type="text" id="input_2" autocomplete="off" class="input" size="85" width="100px" onfocus="
                if (document.getElementById('lista').childNodes[0] !=null && this.value !=''){
                filtraLista(this.value);
                formateaLista(this.value);
                reiniciaSeleccion();
                document.getElementById('lista').style.display='block';
                }"
                onblur="if (v==1) document.getElementById('lista').style.display='none';"
                onkeyup="if (navegaTeclado(event)==1){rellenaLista();}"></input>
                <div id="lista" onmouseout="v=1;" onmouseover="v=0;"></div>
                </td>
                </tr>
                
            </table>
        </div>  
    </body>
</html>

El código PHP:

Código php:

Ver original<?php
function validaBusqueda($parametro)
{
    if(eregi("^[a-zA-Z0-9]{2,40}$",$parametro)) return TRUE;
    else return FALSE;
}
if(isset($_POST["busqueda"]))
{
    $valor=$_POST["busqueda"];
    if (validaBusqueda($valor))
    {
        $conexion=mysql_connect("localhost", "root", "") or die(mysql_error());
        mysql_select_db("biblioteca") or die(mysql_error());
        $consulta=mysql_query("SELECT autor FROM autores WHERE autor LIKE '".$valor."%' ORDER BY autor LIMIT 0, 60");
        mysql_close($conexion);
        $cantidad=mysql_num_rows($consulta);
        if($cantidad==0)
        {
            echo "0&vacio";
        }
        else
        {
            if($cantidad>20) echo "1&";
            else echo "0&";
            
            $cantidad=1;
            while(($registro=mysql_fetch_row($consulta)) && $cantidad<=20)
            {
                echo "<div onClick=\"clickLista(this);\" onMouseOver=\"mouseDentro(this);\">".$registro[0]."</div>";
                $cantidad++;
            }
        }
    }
}
?>

Me gustaría saber como hacer para incluir otros campos de texto y que accedan también a estas funciones aún cuando deban ir a otras tablas.

Espero haberme explicado bien; si necesistais otras partes del código, no hay más que decirlo.
Gracias y un saludo.
PD: A los moderadores: no sé si es correcto poner tanto código en un post, pero no sé tampoco si se pueden adjuntar ficheros. Mis disculpas si incurrí en alguna falta; ha sido por desconocimiento.

tangela · #2 (**permalink**) 04/02/2009, 16:32

Pues tengo una parte de la solución:
En el código javascript comenté la línea 8 de la funcion asignaVariables:

Código javascript:

Ver original//inputLista=document.getElementById("input_2");

y esta misma declaración la introduje en el código html de definición de cada uno de los text:

Código html:

Ver original<input name="Nome" type="text" id="input_2" autocomplete="off" class="input" size="85" width="100px" onfocus="
               inputLista=document.getElemetById("input_2")
                if (document.getElementById('lista').childNodes[0] !=null && this.value !=''){
                filtraLista(this.value);
                formateaLista(this.value);
                reiniciaSeleccion();
                document.getElementById('lista').style.display='block';
                }"

REpitiendo esto en cada uno de los cuadros de texto y asignando un nuevo valor a inputLista y modificando el id del imput se van rellenando con la lista de autocompletar.

Esta es la parte de la solución. La otra parte no la tengo clara, y lo que he hecho ha sido una chapuza porque contradice los principios de economía y reutilización de código propios de la programación.
1.- Tripliqué la funcion rellenaLista con distintos nombres y llamando a diferentes páginas php en función del campo y tabla que quiera incorporar:

Código javascript:

Ver originalajax.open("POST", "proceso.php?", true);

2.- Cambié el código en el evento onKeyUp del input (el que llama a la función de llenado de la lista), llamando a una función diferente en cada caso, según lo explicado en el punto anterior

Código javascript:

Ver originalonkeyup="if (navegaTeclado(event)==1){rellenaLista();}"></input>

Así, repitiendo el proceso para cada text, consigo que cada uno cargue la lista que necesito.
Soy plenamente consciente de que esto no es un ejemplo de programación, pero de momento hace lo que necesito y espero mejorarlo pronto.
Debo hacer notar que esta aplicación se utiliza en un ámbito muy reducido y por pocas personas, por lo que la economía de recursos no es un aspecto primordial.

Se admiten sugerencias para mejorar este ¿codigo?
Saludos.

wolfmao · #3 (**permalink**) 25/02/2009, 08:59

Saludos

hombre te cuento que me paso lo mismo y lo estoy solucionado casi con el mismo camino solo que repeti mas fuinciones en el ajax ahh y no me funciono la parte donde el input lo pasas al js y comentas la linea

//inputLista=document.getElementById("input_2");

el unico problema que me quedo fue que al seleccionar el listado arrojado por el segundo text me lo pone en el primero y no limpia la lista.

gracias por su aporte si encontraste otro camino me seria de gran ayuda
feliz dia