autocompletar varios inputs a traves de un input

Imagen de goku_77
AdjuntoTamaño
Image icon inputautocompletar.JPG12.01 KB
Image icon inputautocompletar1.JPG11.08 KB

Forums: 

Tengo 4 archivos:
1.-index.html
2.-consulta.php
3.-ajax.js
4.-style.css

index.html es donde ingresas los datos
consulta.php hace la consulta del dato que estoy introduciendo en el index.html a través de ajax.js, pero aqui esta el detalle que no se que tengo que modificar para que me imprima en varios. Porque solo me imprime en dos pero quiero que imprima en mas de dos. Leagradeceria encarecidamente la ayuda, es para un proyecto, lo estoy haciendo solo. Por favor!

index.html

AJAX: Autocompletar

Código que ayuda a autocompletar el texto segun contenido de la base de datos. Muestra el identificador del campo seleccionado.

Cédula:
Nombre y Apellido:
Cargo:

consulta.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", "pepe");
mysql_select_db("curso", $link);

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

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

/* La estructura el xml es similar a esta:
<?xml version="1.0" encoding="iso-8859-15" ?>

palabras
palabras
palabras
palabras
palabras

*/
?>

ajax.js

var Conexion=false; // Variable que manipula la conexion.
var Servidor="consulta.php"; // Determina la pagina donde buscar
var Palabra=""; //Determina la ultima palabra buscada.

// funcion que realiza la conexion con el objeto XMLHTTP...
function Conectar()
{
if(window.XMLHttpRequest)
Conexion=new XMLHttpRequest(); //mozilla
else if(window.ActiveXObject)
Conexion=new ActiveXObject("Microsoft.XMLHTTP"); //microsoft
}

function Contenido(idContenido)
{
/* readyState devuelve el estado de la conexion. puede valer:
* 0- No inicializado (Es el valor inicial de readyState)
* 1- Abierto (El método "open" ha tenido éxito)
* 2- Enviado (Se ha completado la solicitud pero ningun dato ha sido recibido todavía)
* 3- Recibiendo
* 4- Respuesta completa (Todos los datos han sido recibidos)
*/

// En espera del valor 4
if(Conexion.readyState!=4) return;
/* status: contiene un codigo enviado por el servidor
* 200-Completado con éxito
* 404-No se encontró URL
* 414-Los valores pasados por GET superan los 512
* statusText: contiene el texto del estado
*/
if(Conexion.status==200) // Si conexion HTTP es buena !!!
{
//si recibimos algun valor a mostrar...
/* Modificamos el identificador idContenido con el valor recibido por la consulta
* Podemos recibir diferentes tipos de datos:
* responseText-Datos devueltos por el servidor en formato cadena
* responseXML-Datos devueltos por el servidor en forma de documento XML
*/
xml=Conexion.responseXML;

var NumberElements = xml.getElementsByTagName('label');

var texto="";
//cogemos el valor del tag del xml
var id=xml.getElementsByTagName('id')[0];
if( id ) //si tiene valor, lo mostramos
document.getElementById("numberId").value=id.childNodes[0].data;
else //si no tiene valor, lipiamos la casilla
document.getElementById("numberId").value="";

//si hay mas de un elemento...
if(NumberElements.length>0 || id)
{
document.getElementById(idContenido).style.display="block";
//bucle para recorrer todos los elementos del xml
for(var i=0; i < NumberElements.length; i++)
{
//window.alert(xml.getElementsByTagName('label')[i].childNodes[0].data);
texto += ""+xml.getElementsByTagName('label')[i].childNodes[0].data+"";
}
}else
document.getElementById(idContenido).style.display="none";
document.getElementById(idContenido).innerHTML=texto;
}else{
document.getElementById(idContenido).innerHTML=Conexion.status+"-"+Conexion.statusText;
}

// Deshabilitamos la visualización del reloj
document.getElementById("reloj").style.visibility="hidden";

Conexion=false;
}

function Solicitud(idContenido,Cadena)
{
// si no recibimos cadena, no hacemos nada.
// Cadena=la cadena a buscar en la base de datos
/* Si cadena es igual a Palabra, no se realiza la busqueda. Puede ser que pulsen la tecla tabulador,
* y no interesa que vuelva a verificar...*/
if(Cadena && Cadena!=Palabra)
{
// Si ya esta conectado, cancela la solicitud en espera de que termine
if(Conexion) return; // Previene uso repetido del boton.

// Realiza la conexion
Conectar();

// Si la conexion es correcta...
if(Conexion)
{
// Habilitamos la visualización del reloj
document.getElementById("reloj").style.visibility="visible";

// Esta variable, se utiliza para igualar con la cadena a buscar.
Palabra=Cadena;

/* Preparamos una conexion con el servidor:
* POST|GET - determina como se envian los datos al servidor
* true - No sincronizado. Ello significa que la página WEB no es interferida en su funcionamiento
* por la respuesta del servidor. El usuario puede continuar usando la página mientras el servidor
* retorna una respuesta que la actualizará, usualmente, en forma parcial.
* false - Sincronizado */
Conexion.open("POST",Servidor,true);

// Añade un par etiqueta/valor a la cabecera HTTP a enviar. Si no lo colocamos, no se pasan los parametros.
Conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// Cada vez que el estado de la conexión (readyState) cambie se ejecutara el contenido de esta "funcion()"
Conexion.onreadystatechange=function()
{
Contenido(idContenido);
}

date=new Date();
/* Realiza la solicitud al servidor. Puede enviar una cadena de caracteres, o un objeto del tipo XML
* Si no deseamos enviar ningun valor, enviariamos null */
Conexion.send("idContenido="+idContenido+"&word="+Cadena+"&"+date.getTime());
}else
document.getElementById(idContenido).innerHTML="No disponible";
}
}

// Funcion que inicia la busqueda.
// Tiene que recibir el identificador donde mostrar el listado, y la cadena a buscar
function autocompletar(idContenido,Cadena)
{
// Comprovamos que la longitud de la cadena sea superior o igual a 1 caracteres
if(Cadena.length>=1)
{
if(Conexion!=false)
{
// Deshabilitamos la visualización del reloj
document.getElementById("reloj").style.visibility="hidden";
//si esta en medio de una conexion, la cancelamos
Conexion.abort();
Conexion=false;
}
Solicitud(idContenido,Cadena);
}else
document.getElementById(idContenido).style.display="none";
}

// Funcion que se ejecuta cuando seleccionamos un valor del desplegable
function selectItem(idContenido,value)
{
// Cuando pulsamos sobre el desplegable, colocamos el valor en el cuadro de texto
document.getElementById("input").value=value;
//volvemos a indicar que actualice el listado con el nuevo valor
autocompletar(idContenido,value);
}

style.css

body
{
font-family: Arial;
font-size:10px;
}

#input
{
position:relative;
width:50px;
padding: 1pt;
border:1px solid;
}

#numberId
{
width:150px;
position:relative;
border:1px solid;
}

#reloj
{
position:relative;
vertical-align: bottom;
visibility: hidden;
}

#lista
{
width:180px;
background-color:#ffffff;
color:#000000;
border:1px solid;
border-color:#000000;
z-index:1;
display:none;
margin-top: 5px;
}

#lista a
{
display: block;
background-color:#ffffff;
padding: 2pt;
}

#lista a:hover
{
background-color:#00aaaa;
}

Cita: no se que tengo que

Imagen de deathUser

[quote]no se que tengo que modificar para que me imprima en varios. Porque solo me imprime en dos pero quiero que imprima en mas de dos[/quote]
Te puedes explicar mejor ...???

No te entiendo que quieres decir cuando dices que solo te imprime en dos ...

bye
;)

ok!

Imagen de goku_77

ok, lo que quiero decir es que en ese ejemplo, me imprime en dos inputs.

Cédula:
Nombre y Apellido:


Cédula:
Nombre y Apellido:

Sé como colocar los otros inputs para que se me muestren en la pagina html "index.html"
pero no se como hacer para que se me cargue los datos en el nuevo input.

en sistema actual funciona asi, cuando estoy introduciendo la cedula en el primer input, me aparecen las posibles cedulas que estoy buscando, cuando elijo la cedula me aparece el nombre y el apellido cuando le doy clic a la cedula que quiero o cuando termino de escribirla.

Quiero otros input como cargo, departamento, etc. pero no se que tengo que modificar en el arhivo de php, css y js. para que me funicone. Porque he hecho todo, he modificado esos tres archivos, lo unico que hago es ver ese codigo! porque ya no se donde modificarlo para adaptarlo para que me imprima en los tros input que quiero agregar

B.V.

<input type="text"

Imagen de deathUser


Agrégale un id, por ejemplo:

y luego ...

ubica la línea:

document.getElementById("numberId").value=id.childNodes[0].data;

Y agrega otra para el cargo:


document.getElementById("cargo").value=id.childNodes[0].data;

claro que ahí tienes que ponerle el valor que corresponda, según le saques "id.childNodes[0].data"

bye
;)

A primera vista, se generan

Imagen de deathUser

A primera vista, se generan los datos consultados en un XML, en el cual se identifican los registros por un campo ID, que es al que se lo referencia luego, para acceder al resto de información, necesitarás modificar el XML y el código para acceder a los datos del mismo a tu conveniencia.

bye
;)

autocompletar

Está muy bueno el código, y funciona. Ahora bien, como hacer para que cuando selecciona el empleado, me inserte los datos en otra tabla.
Por ejemplo, busco Cédula, me encuentra el Apellido y Nombre del empleado y el cargo, y esos datos pasarlos a una tabla Departamento o seccion, etc.

agregar

Imagen de goku_77

agregale a cada input un name='' para que en otro archivo php los resiva en $_post o $_get.

y encierras todos los input en un formulario.


envia.php

cedula:


resibe.php
cedula=$_get['ced'];

B.V.

Páginas