Foros del Web - Ver Mensaje Individual

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.