Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Realizar busqueda con autocompletar y rellenar input

 Estas en el tema de Realizar busqueda con autocompletar y rellenar input en el foro de Frameworks JS en Foros del Web. Holaaa.. a todos... Saludos desde Venezuela.. Soy algo nuevo en estos temas.. lo poco que se lo he aprendido en poco tiempo, y bueno me ...
  #1 (permalink)  
Antiguo 12/04/2011, 03:49
 
Fecha de Ingreso: abril-2011
Mensajes: 1
Antigüedad: 13 años, 7 meses
Puntos: 0
Pregunta Realizar busqueda con autocompletar y rellenar input
Holaaa.. a todos...
Saludos desde Venezuela..
Soy algo nuevo en estos temas.. lo poco que se lo he aprendido en poco tiempo, y bueno me falta bastante practica..

Mi problema es el siguiente tengo una base de datos con una tabla de profesores, con los siguientes campos: NOMBRE, APELLIDO, CI...
Necesito realizar una busqueda por NOMBRE APELLIDO que se autocomplete y en otro input mostrar la CI de este profesor..
Consegui un codigo, que autocompleta la CI y devuelve NOMBRE y APELLIDO, pero cuando lo intento modificar no funciona..

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX: Autocompletar</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>

Cédula:<input type="text" id="input" />
Nombre y Apellido:<input type="text" id="numberId" onkeyup="javascript:autocompletar('lista',this.value);"/>


<span id="reloj"><img src='image.gif' border=0 /></span>
<!-- div que mostrara la lista de coincidencias -->
<div id="lista"></div>
</body>
</html>
Código PHP:
<?php
// Fichero que realiza la consulta en la base de datos y devuelve los resultados
if(isset($_POST["word"]))
{
    // Conectamos con la base de datos
    $link=mysql_connect("localhost", "root", "");
    mysql_select_db("tabla", $link);

    if($_POST["word"]{0}=="*")
        $result=mysql_query("SELECT * FROM profesores WHERE NOMBRE LIKE '%".substr($_POST["word"],1)."%' ORDER BY NOMBRE LIMIT 10",$link);
    else
        $result=mysql_query("SELECT * FROM profesores WHERE NOMBRE LIKE '".$_POST["word"]."%' ORDER BY NOMBRE LIMIT 10",$link);

    //vamos a emitir en formato xml
    header("Content-type: text/xml");
    echo '<?xml version="1.0" encoding="iso-8859-15" ?>';
    echo "<content>";
    $label.="<labels>";
        while($row=mysql_fetch_array($result))
        {
            $PROFESOR='.$row["NOMBRE"]." ".$row["APELLIDO"].';
            if(strtoupper($_POST["word"])==strtoupper($row["NOMBRE"]))
            {
                echo "<id>".$row["CI"]."</id>"; //unicamente enviamos el identificador si se tenemos la palabra exacta
            }
            else
            {
            $label.="\n<label>".$row["NOMBRE"]." ".$row["APELLIDO"]."</label>";
            }
        }
    $label.="</labels>";
    echo $label."</content>";
}

/* La estructura el xml es similar a esta:
<?xml version="1.0" encoding="iso-8859-15" ?>
<content>
<id></id>
<labels>
<label>palabras</label>
<label>palabras</label>
<label>palabras</label>
<label>palabras</label>
<label>palabras</label>
</labels>
</content>
*/
?>
Código Javascript: 
Ver original
  1. var Conexion=false; // Variable que manipula la conexion.
  2. var Servidor="consulta.php"; // Determina la pagina donde buscar
  3. var Palabra=""; //Determina la ultima palabra buscada.
  4.  
  5. // funcion que realiza la conexion con el objeto XMLHTTP...
  6. function Conectar()
  7. {
  8.     if(window.XMLHttpRequest)
  9.     Conexion=new XMLHttpRequest(); //mozilla
  10.     else if(window.ActiveXObject)
  11.     Conexion=new ActiveXObject("Microsoft.XMLHTTP"); //microsoft
  12. }
  13.  
  14. function Contenido(idContenido)
  15. {
  16.     /* readyState devuelve el estado de la conexion. puede valer:
  17.     * 0- No inicializado (Es el valor inicial de readyState)
  18.     * 1- Abierto (El método "open" ha tenido éxito)
  19.     * 2- Enviado (Se ha completado la solicitud pero ningun dato ha sido recibido todavía)
  20.     * 3- Recibiendo
  21.     * 4- Respuesta completa (Todos los datos han sido recibidos)
  22.     */
  23.     
  24.     // En espera del valor 4
  25.     if(Conexion.readyState!=4) return;
  26.     /* status: contiene un codigo enviado por el servidor
  27.     * 200-Completado con éxito
  28.     * 404-No se encontró URL
  29.     * 414-Los valores pasados por GET superan los 512
  30.     * statusText: contiene el texto del estado
  31.     */
  32.     if(Conexion.status==200) // Si conexion HTTP es buena !!!
  33.     {
  34.         //si recibimos algun valor a mostrar...
  35.         /* Modificamos el identificador idContenido con el valor recibido por la consulta
  36.         * Podemos recibir diferentes tipos de datos:
  37.         * responseText-Datos devueltos por el servidor en formato cadena
  38.         * responseXML-Datos devueltos por el servidor en forma de documento XML
  39.         */
  40.         xml=Conexion.responseXML;
  41.  
  42.         var NumberElements = xml.getElementsByTagName('label');
  43.         
  44.         var texto="";
  45.         //cogemos el valor del tag <id> del xml
  46.         var id=xml.getElementsByTagName('id')[0];
  47.         if( id ) //si tiene valor, lo mostramos
  48.         document.getElementById("input").value=id.childNodes[0].data;
  49.         else //si no tiene valor, limpiamos la casilla
  50.         document.getElementById("input").value="";
  51.         
  52.         //si hay mas de un elemento...
  53.         if(NumberElements.length>0 || id)
  54.         {
  55.             document.getElementById(idContenido).style.display="block";
  56.             //bucle para recorrer todos los elementos del xml
  57.             for(var i=0; i < NumberElements.length; i++)
  58.             {
  59.             //window.alert(xml.getElementsByTagName('label')[i].childNodes[0].data);
  60.             texto += "<a href=\"javascript:selectItem('"+idContenido+"','"+xml.getElementsByTagName('label')[i].childNodes[0].data+"')\">"+xml.getElementsByTagName('label')[i].childNodes[0].data+"</a>";
  61.             }
  62.         }else
  63.             document.getElementById(idContenido).style.display="none";
  64.     document.getElementById(idContenido).innerHTML=texto;
  65.     }else{
  66.         document.getElementById(idContenido).innerHTML=Conexion.status+"-"+Conexion.statusText;
  67.     }
  68.  
  69.     // Deshabilitamos la visualización del reloj
  70.     document.getElementById("reloj").style.visibility="hidden";
  71.     
  72.     Conexion=false;
  73. }
  74.  
  75. function Solicitud(idContenido,Cadena)
  76. {
  77.     // si no recibimos cadena, no hacemos nada.
  78.     // Cadena=la cadena a buscar en la base de datos
  79.     /* Si cadena es igual a Palabra, no se realiza la busqueda. Puede ser que pulsen la tecla tabulador,
  80.     * y no interesa que vuelva a verificar...*/
  81.     if(Cadena && Cadena!=Palabra)
  82.     {
  83.         // Si ya esta conectado, cancela la solicitud en espera de que termine
  84.         if(Conexion) return; // Previene uso repetido del boton.
  85.         // Realiza la conexion
  86.         Conectar();
  87.         // Si la conexion es correcta...
  88.         if(Conexion)
  89.         {
  90.             // Habilitamos la visualización del reloj
  91.             document.getElementById("reloj").style.visibility="visible";
  92.             // Esta variable, se utiliza para igualar con la cadena a buscar.
  93.             Palabra=Cadena;
  94.             /* Preparamos una conexion con el servidor:
  95.             * POST|GET - determina como se envian los datos al servidor
  96.             * true - No sincronizado. Ello significa que la página WEB no es interferida en su funcionamiento
  97.             * por la respuesta del servidor. El usuario puede continuar usando la página mientras el servidor
  98.             * retorna una respuesta que la actualizará, usualmente, en forma parcial.
  99.             * false - Sincronizado */
  100.             Conexion.open("POST",Servidor,true);
  101.  
  102.             // Añade un par etiqueta/valor a la cabecera HTTP a enviar. Si no lo colocamos, no se pasan los parametros.
  103.             Conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  104.  
  105.             // Cada vez que el estado de la conexión (readyState) cambie se ejecutara el contenido de esta "funcion()"
  106.             Conexion.onreadystatechange=function()
  107.             {
  108.                 Contenido(idContenido);
  109.             }
  110.  
  111.             date=new Date();
  112.             /* Realiza la solicitud al servidor. Puede enviar una cadena de caracteres, o un objeto del tipo XML
  113.             * Si no deseamos enviar ningun valor, enviariamos null */
  114.             Conexion.send("idContenido="+idContenido+"&word="+Cadena+"&"+date.getTime());
  115.         }else
  116.         document.getElementById(idContenido).innerHTML="No disponible";
  117.     }
  118. }
  119.  
  120. // Funcion que inicia la busqueda.
  121. // Tiene que recibir el identificador donde mostrar el listado, y la cadena a buscar
  122. function autocompletar(idContenido,Cadena)
  123. {
  124. // Comprobamos que la longitud de la cadena sea superior o igual a 1 caracteres
  125.     if(Cadena.length>=1)
  126.     {
  127.         if(Conexion!=false)
  128.         {
  129.             // Deshabilitamos la visualización del reloj
  130.             document.getElementById("reloj").style.visibility="hidden";
  131.             //si esta en medio de una conexion, la cancelamos
  132.             Conexion.abort();
  133.             Conexion=false;
  134.         }
  135.         Solicitud(idContenido,Cadena);
  136.     }else
  137.     document.getElementById(idContenido).style.display="none";
  138. }
  139.  
  140. // Funcion que se ejecuta cuando seleccionamos un valor del desplegable
  141. function selectItem(idContenido,value)
  142. {
  143.     // Cuando pulsamos sobre el desplegable, colocamos el valor en el cuadro de texto
  144.     document.getElementById("numberId").value=value;
  145.     //volvemos a indicar que actualice el listado con el nuevo valor
  146.     autocompletar(idContenido,value);
  147. }

Me funciona si escribo solo el nombre, pero si hago click en la lista o escribo el nombre y apellido pierdo la cedula
Gracias de antemano..

Etiquetas: ajax, busquedas, autocompletado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:07.