Buscador en tiempo real con AJAX, PHP y MySQL

Buscador realizado en HTML utilizando como lenguaje de programación PHP, la tecnología AJAX y a MySQL como motor de base de datos.


Explicación:

Antes que todo, para el ejemplo utilizamos una base de datos llamada database que contiene una sóla tabla llamada personas. Ésta tan sólo tiene dos campos: cod y nombre.

Tenemos el archivo conexion.php para conectarse a la base de datos:

< ?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>

El archivo buscajax.php es la vista de nuestra aplicacion donde creamos nuestro código html. En él incluimos la hojas de estilos y el código javascript que contiene la funcion ajax. El método onkeyup() ejecuta ésta funcion.

Archivo buscajax.php

< !DOCTYPE html>
< html>

< head><title>Buscador</title>

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

< /head>

< body>

< center>

< h1><b>Buscador AJAX - PHP - MySQL</b></h1>

Buscar <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()" required />

< div id="myDiv"></div>

< /center>

< /body>

< /html>

El archivo ajax.js es un archivo javascript que contiene una función llamada loadXMLDoc(), ésta se activa cada vez que el usuario suelta una tecla del teclado.

El objetivo de esta función es capturar las letras que se ingresen en la caja de texto, almacenarlas en una varibale llamado q y con el método POST se procesen através del archivo proc.php.

Archivo ajax.js

function loadXMLDoc()
{
var xmlhttp;

var n=document.getElementById('bus').value;

if(n==''){
document.getElementById("myDiv").innerHTML="";
return;
}

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proc.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}

El archivo proc.php contiene codigo php, lo que hace es capturar el valor que trae la variable q y utilizarla para hacer las consulta a la base de datos.

Por ejemplo si el valor de q es J, hacemos una consulta a la base de datos para que arroje sólo los nombres que empiezan con J y mostrar los resultados en el div con id: myDiv ubicado en el archivo buscajax.php.

Archivo proc.php

< ?php

include 'conexion.php';

$q=$_POST[q];
$con=conexion();

$sql="select * from personas where nombre LIKE '".$q."%'";
$res=mysql_query($sql,$con);

if(mysql_num_rows($res)==0){

echo '<b>No hay sugerencias</b>';

}else{

echo '<b>Sugerencias:</b><br />';

while($fila=mysql_fetch_array($res)){

echo $fila['nombre'].'<br />';

}

}

?>

Por ultimo pero no menos importante el código css para darle un poco de estilo a la página.

Archivo estilos.css

div
{

margin-top: 10px;
border-style:dashed;
width: 500px;
height: 500px;
background-color:#F0FFF0;
text-align: left;
color:#00008B;
padding:10px 10px;
}

body{
color:#696969;
font-family:Arial,Helvetica,sans-serif;
}