La busqueda 'live' de un campo es fácil si la estructuras de forma correcta, intentare ayudarte:
1. Entre las etiquetas <head></head> de tu página llama a la funcion js en el cual vas a hacer la llamada ajax.
Código HTML:
<script type="text/javascript" src="manejador_ajax.js">
2. En el archivo manejador manejador_ajax.js puedes escribir esto:
Código:
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
3. Luego haces otra llamada a un script js:
Código HTML:
<script type="text/javascript" src="live_search.js">
que contendra esto:
Código:
window.onload = function()
{
num_socio = document.getElementById('num_socio');
num_socio.onchange = function()
{
//Este es el div que vas a poner en tu pagina
var msg_sistema = document.getElementById('msg_sistema');
//
num_socio = document.forms[0].num_socio.value;
ajax = nuevoAjax();
// archivo con la logica de la base de datos
url = "buscar_socio.php";
ajax.open("POST",url,true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.onreadystatechange = function()
{
if(ajax.readyState == 1)
{
// Buscate una imagen para crear el prealoder, puedes conseguirla en ajaxload.info
msg_sistema.innerHTML = "<img src=\"../imagenes/ajax-loader.gif\" / alt=\"Cargando...\">";
}
if(ajax.readyState == 4)
{
msg_sistema.innerHTML = ajax.responseText
}
}
ajax.send(
"num_socio="+num_socio);
}
4. Primero creas el input de tipo texto
Código HTML:
<input type="text" name=''num_socio" id="num_socio">
5. Creas el div donde pondras la respuesta
Código HTML:
<div id="msg_sistema"></div>
6. Creas tu archivo buscar_socio.php que contendra la llamada a la base de datos y en la cadena SQL de consulta
Código:
SELECT Num_socio, ap_materno, Ap_paterno, Nombres
FROM SOCIOS WHERE Num_socio='num_socio'
7. Solo te quedaria presentar los resultados de las consultas con las ordenes del lenguaje de scripting (en este caso php) que utilices correspondientes