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.
[singlepic id=29 w=273 h=111 float=center]
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++;
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!!
Gracias. Sí, utiliza la cláusula LIMIT en la consulta.
listo gracias
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 ?
Yo estaba escribiendo eso aora mismo tambien me pasa igual a ver si encontramos solucion..
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()
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.
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
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.
es posible mostrar las sugerencias despues de escribir la segunda letra ?
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.
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
…mmm… debería funcionar igual.
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!
Lo más rápido es por jQuery. Pones una escucha en el listado y al hacer click le cambias el valor al input
Podrías pasarme el código? Estoy en 0 con jquery… Gracias!
e intentado aun con el pop-up y no lo e logrado, alguien conoseria otra forma o un link donde pudiera encntrar esto gracias
ReferenceError: mostrarResultados is not defined
HOLA ESTE ES EL ERROR QUE ME APARECE ME PODRÍAN AYUDAR GRACIAS