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..
index.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>
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", "");
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>";
}
?>
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)
{
// En espera del valor 4
if(Conexion.readyState!=4) return;
if(Conexion.status==200) // Si conexion HTTP es buena !!!
{
xml=Conexion.responseXML;
var NumberElements = xml.getElementsByTagName('label');
var texto="";
//cogemos el valor del tag <id> del xml
var id=xml.getElementsByTagName('id')[0];
if( id ) //si tiene valor, lo mostramos
document.getElementById("input").value=id.childNodes[0].data;
else //si no tiene valor, limpiamos la casilla
document.getElementById("input").value="";
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 += "<a href=\"javascript:selectItem('"+idContenido+"','"+xml.getElementsByTagName('label')[i].childNodes[0].data+"')\">"+xml.getElementsByTagName('label')[i].childNodes[0].data+"</a>";
}
}else
document.getElementById(idContenido).style.display="none";
document.getElementById(idContenido).innerHTML=texto;
}else{
document.getElementById(idContenido).innerHTML=Conexion.status+"-"+Conexion.statusText;
}
document.getElementById("reloj").style.visibility="hidden";
Conexion=false;
}
function Solicitud(idContenido,Cadena)
{
if(Cadena && Cadena!=Palabra)
{
if(Conexion) return; // Previene uso repetido del boton.
Conectar();
if(Conexion)
{
document.getElementById("reloj").style.visibility="visible";
Palabra=Cadena;
Conexion.open("POST",Servidor,true);
Conexion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
Conexion.onreadystatechange=function()
{
Contenido(idContenido);
}
date=new Date();
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)
{
if(Cadena.length>=1)
{
if(Conexion!=false)
{
document.getElementById("reloj").style.visibility="hidden";
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)
{
document.getElementById("numberId").value=value;
autocompletar(idContenido,value);
}
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..
