Sugerencias dinámicas con AJAX

Entrada en la que se explica cómo hacer un formulario en el que se vayan mostrando sugerencias de forma dinámica mediante AJAX.

turner

archivado en: PHP/AJAX / 28 noviembre, 2012

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.

  1. <?php
  2. $dbhost = 'nombre del host';
  3. $dbuser = 'usuario';
  4. $dbpass = 'contraseña';
  5. $dbname = 'base de datos';
  6. $link_id = new mysqli($dbhost,$dbuser,$dbpass,$dbname);
  7. if ($link_id ->connect_error) {
  8. echo "Error de Connexion ($link_id->connect_errno)
  9. $link_id->connect_error\n";
  10. exit;
  11. }
  12. ?>

2. funciones_ajax.js

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

  1. <script type="text/javascript">
  2. function mostrarResultados(str) {
  3. if (str.length==0) {
  4. document.getElementById("buscador_dinamico").innerHTML="";
  5. document.getElementById("buscador_dinamico").style.border="0px";
  6. return;
  7. }
  8. if (window.XMLHttpRequest) {
  9. // para el IE7+, Firefox, Chrome, Opera, Safari
  10. xmlhttp=new XMLHttpRequest();
  11. }
  12. else {
  13. // para el IE6, IE5
  14. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15. }
  16. xmlhttp.onreadystatechange=function() {
  17. if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  18. document.getElementById("buscador_dinamico").innerHTML=xmlhttp.responseText;
  19. document.getElementById("buscador_dinamico").style.border="1px solid #A5ACB2";
  20. }
  21. }
  22. xmlhttp.open("GET","sugerencias.php?q="+str, true);
  23. xmlhttp.send();
  24. }
  25. </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.

  1. <?php
  2. require_once('conexion.php'); if (isset($_REQUEST['q']) && $_REQUEST['q'] !="") {
    $busqueda_dinosaurio = strip_tags(addslashes($_REQUEST['q'])); } ?>
  3. <div class='buscador_dinamico'>
  4. <?php if (strlen($busqueda_dinosaurio) > 0) {
  5. $resultado_search = $link_id->query("SELECT nombre_dinosaurio FROM dinosaurios_table WHERE nombre_dinosaurio LIKE '%$busqueda_dinosaurio%' ");
  6. $row_cnt = $resultado_search->num_rows;
  7. if ($row_cnt==0) { ?>
  8. <span class ='buscador_sin_resultados'> sin resultados </span>
  9. <?php } else {
  10. while ($filas=$resultado_search->fetch_assoc()) { ?>
  11. <a href="dinosaurios.php?nombre_dinosaurio=<?php echo $filas['nombre_dinosaurio']; ?>">
  12. <?php echo $filas['video_title']; ?>
  13. </a>
  14. </br>
  15. <?php }
  16. }
  17. } ?>
  18. </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.

  1. <form id="formulario_search" name="formulario_search">
  2. <input type="text" size="30" id="formulario_search_cas" name="formulario_search_cas" onkeyup="mostrarResultados(this.value)" />
  3. <div id="buscador_dinamico" ></div>
  4. </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.

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

Abrazos++;

|| Tags: ,

valoración de los lectores sobre Sugerencias dinámicas con AJAX

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.6 sobre 5 (9 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

18 respuestas a “Sugerencias dinámicas con AJAX

  1. 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!!

  2. jorge el 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 ?

  3. david el dijo:

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

  4. marcos el 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()

  5. marcos el 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.

  6. david el 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

  7. marcos el 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.

  8. marcos el 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.

  9. camilosama el 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

  10. 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!

  11. marcos el 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

  12. camilosama el 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

  13. CAMILOSAMA el dijo:

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