Sugerencias dinámicas con AJAX

AJAX permite hacer cosas muy chulas que mejoran la experiencia de usuario. Una muy interesante es mostrar sugerencias en los formularios de búsqueda (algo similar a lo que hace Google), lo cual es tan sencillo como ir recogiendo resultados similares a los que va escribiendo el usuario de la tabla que sea.

El código es sencillo.

1. mi_conexion.php

En un archivo php (mi_conexion.php o cómo se quiera llamar) se indican los datos de la conexión.

<?php
$dbhost = 'nombre del host';
$dbuser = 'usuario';
$dbpass = 'contraseña';
$dbname = 'base de datos';
$link_id = new mysqli($dbhost,$dbuser,$dbpass,$dbname);
if ($link_id ->connect_error) {
echo "Error de Connexion ($link_id->connect_errno)
$link_id->connect_error\n";
exit;
}
?>

2. funciones_ajax.js

En funciones_ajax.js o cómo se quiera llamar, se incluye el objeto XMLHttpRequest (XHR)

<script type="text/javascript">
function mostrarResultados(str) {
if (str.length==0) {
document.getElementById("buscador_dinamico").innerHTML="";
document.getElementById("buscador_dinamico").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// para el IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// para el IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("buscador_dinamico").innerHTML=xmlhttp.responseText;
document.getElementById("buscador_dinamico").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","sugerencias.php?q="+str, true);
xmlhttp.send();
}
</script>

Observa que en las líneas 4, 5, 18 y 19 se hace referencia a un nodo del dom, que será un div, llamado «buscador_dinamico». Ahí será dónde cargaremos el resultado de la consulta dinámica generada en sugerencias.php.

3. sugerencias.php

En sugerencias.php se hace la consulta. Con un like buscamos los resultados que contengan los caracteres que se van escribiendo en el buscador. Para este ejemplo, vamos a buscar en la tabla dinosaurios_table por la columna nombre_dinosaurio.

A diferencia de otros buscadores dinámicos, que sitúan la sugerencia en el placeholder y obligan al usuario a tener que pulsar luego el botón buscar, en este ejemplo cargo el enlace directamente en la sugerencia, pero vamos, que se puede hacer de cualquier otra forma. Lo importante es comprender el proceso.

En enlace llevaría a una página llamada dinosaurios.php, en la cual se mostraría el dinosaurio escogido... pero esto ya no hace falta desarrollarlo para este ejemplo.

<?php
require_once('conexion.php'); if (isset($_REQUEST['q']) && $_REQUEST['q'] !="") {

$busqueda_dinosaurio = strip_tags(addslashes($_REQUEST['q'])); } ?>
<div class='buscador_dinamico'>
<?php if (strlen($busqueda_dinosaurio) > 0) {
$resultado_search = $link_id->query("SELECT nombre_dinosaurio FROM dinosaurios_table WHERE nombre_dinosaurio LIKE '%$busqueda_dinosaurio%' ");
$row_cnt = $resultado_search->num_rows;
if ($row_cnt==0) { ?>
<span class ='buscador_sin_resultados'> sin resultados </span>
<?php } else {
while ($filas=$resultado_search->fetch_assoc()) { ?>
<a href="dinosaurios.php?nombre_dinosaurio=<?php echo $filas['nombre_dinosaurio']; ?>">
<?php echo $filas['video_title']; ?>
</a>
</br>
<?php }
}
} ?>
</div>

4. El formulario

En la página que se necesite, se incluye el formulario, en el que se puede añadir un placeholder o lo que se quiera. Lo dejo sencillico aquí para no liarnos con adornos. Obsevad que onkeyup, es decir, cuando se escribe alguna letra, llama a la función mostrarResultados.

Debajo del formulario añadimos un div donde recogemos el resultado de la consulta PHP.

<form id="formulario_search" name="formulario_search">
<input type="text" size="30" id="formulario_search_cas" name="formulario_search_cas" onkeyup="mostrarResultados(this.value)" />
<div id="buscador_dinamico" ></div>
</form>

No entro en estilos, lo único recomendar que para el div donde se vayan a mostrar los resultados, aparte de definir una altura máxima, se use position:relative y z-index:10, para que se superponga al resto de la página y no la desplace hacia abajo.

Por último, en la página donde vaya el formulario, hay que incluir el archivo donde definimos el objeto XHR.

<?php require_once('funciones_ajax.js'); ?>

Abrazos++;

david el 8 junio, 2013 a las 17:27 dijo:

Hola maravilloso articulo y gracias!! pero tengo una pregunta.
tengo unos 1000 productos en mi buscador y unos 800 contienen la letra “A” entonce cuando escribo A en el buscador me sale unas 800 sugerencias hay forma de poner un limite ? por ejemplo que tenga unas 20 sugerencias de limite
gracias y un saludo!!

marcos el 8 junio, 2013 a las 17:50 dijo:

Gracias. Sí, utiliza la cláusula LIMIT en la consulta.

david el 8 junio, 2013 a las 18:02 dijo:

listo gracias

jorge el 8 junio, 2013 a las 18:13 dijo:

hola tengo un problema limite la consulta a 20 con limit 20 como david pero se pierden sugerencias al buscar sin limit aparecen resultados que al usar limit no aparecen como es posible ?

david el 8 junio, 2013 a las 18:14 dijo:

Yo estaba escribiendo eso aora mismo tambien me pasa igual a ver si encontramos solucion..

marcos el 8 junio, 2013 a las 19:07 dijo:

No sé si he entendido bien cuál es el problema. Si limitáis los resultados, claro está, no los muestra todos. Para que no sean siempre los primeros, podéis utilizar un ORDER BY RAND()

marcos el 8 junio, 2013 a las 19:09 dijo:

Otra opción, estaba pensando, es que hagáis la consulta sin el LIMIT. luego, antes de mostrar los resultados, ya los filtráis como queráis mediante PHP.

david el 8 junio, 2013 a las 19:17 dijo:

lo que quiero decir no es que muestre menos resultador por estar limit , lo que quiero decir es que algunos productos no existen, es como si solo buscara en los 20 que busco al pulsar en la primera letra del producto, busco alicia al pulsar la “A” aparecen 20 y al seguir escribiendo ALICIA solo lo busca en eso 20 que aparecio con la primera letra no en la base de datos no se si me explico bien.. pero bueno intentare probar con la segunda opcion gracias marcos

marcos el 8 junio, 2013 a las 21:45 dijo:

pues eso sí que es raro. No debería ser así. Calcula que cada vez que pulsas una letra se envía una nueva petición.

carmen el 11 junio, 2013 a las 17:14 dijo:

es posible mostrar las sugerencias despues de escribir la segunda letra ?

marcos el 11 junio, 2013 a las 18:30 dijo:

Sí, por JavaScript. En el archivo funciones_ajax.js, en la segunda línea, en vez de:

if (str.length==0) {

pon if (str.length>2) {

y en la línea 8, en vez de
if (window.XMLHttpRequest) {

pon

if (window.XMLHttpRequest && str.length>2) {

con eso debería bastar, creo.

camilosama el 19 marzo, 2015 a las 16:20 dijo:

buen dia, gracias me a ayudado mucho pero al momneto en qeu trato de ahcerlño en un pop-up no me funciona, quisiera saber como podria ahcerlo en una ventana emergente mil gracias

marcos el 19 marzo, 2015 a las 17:49 dijo:

…mmm… debería funcionar igual.

ody el 23 marzo, 2015 a las 21:18 dijo:

Muchas gracias por el script! Solo una consulta, cómo puedo hacer para que las sugerencias las muestre como en la imagen de arriba para que pueda seleccionarla y que el nombre quede en el campo de texto? Gracias!

marcos el 23 marzo, 2015 a las 21:49 dijo:

Lo más rápido es por jQuery. Pones una escucha en el listado y al hacer click le cambias el valor al input

ody el 23 marzo, 2015 a las 22:41 dijo:

Podrías pasarme el código? Estoy en 0 con jquery… Gracias!

camilosama el 13 abril, 2015 a las 15:32 dijo:

e intentado aun con el pop-up y no lo e logrado, alguien conoseria otra forma o un link donde pudiera encntrar esto gracias

CAMILOSAMA el 23 abril, 2015 a las 14:02 dijo:

ReferenceError: mostrarResultados is not defined
HOLA ESTE ES EL ERROR QUE ME APARECE ME PODRÍAN AYUDAR GRACIAS