Me lo contaron y lo olvidé, lo leí y lo entendí, lo hice y lo aprendí.





jueves, 24 de enero de 2013

Buscador dinámico [AJAX, JQuery]

Un "diseño" interesante para un buscador podría ser uno que, al momento de teclear en el campo de búsqueda, se fueran mostrando en "tiempo real" los resultados en el espacio correspondiente.

Una buena forma de hacerlo es mediante JQuery que tiene un mejor manejo de los eventos y brinda un sencillo método para manejar AJAX.

Para nuestro ejemplo, vamos a considerar que tenemos una Base de datos "busqueda" con la tabla "post" que contiene los siguientes campos:

| id | titulo | contenido |
| 1  |         |                 |


Crearemos primero nuestro archivo .php que será el que realizará la búsqueda en la base de datos y mostrará los resultados en una tabla:

Conectamos primero a la base de datos:
<?php

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$mysqli = new mysqli($dbhost,$dbuser,$dbpass,"busqueda");

?>

Luego comprobaremos si recibimos el parámetro de búsqueda por POST además de evitar que éste sea un espacio en blanco:

<?php


if(isset($_POST['parametro'])) //Verificamos que venga el parámetro vía POST
{
$parametro=trim($_POST['parametro']); //Limpiamos los espacios en blanco
if($parametro!="") //Comprobamos que no quede una cadena vacía
{
....

Ahora lo sencillo, realizar la búsqueda en la base de datos buscando tanto en el campo "título" como en el campo "contenido" coincidencias con respecto al parámetro buscado y lo metemos todo a una tabla:

<?php


$result = $mysqli->query("SELECT * FROM post WHERE titulo LIKE '%$parametro%' or contenido LIKE '%$parametro%';");
$resultados = array();
while ($row_errs = $result->fetch_array()) 

$resultados[]= $row_errs; 
}
?>
<table>
<?php
foreach($resultados as $post):
?>
<tr>
<td>
<?php echo $post['titulo'].": "; ?>
</td>
<td>
<?php echo $post['contenido']; ?>
</td>
</tr>
<?php
endforeach;
?>
</table>
<?php


?>

El archivo de búsqueda quedaría así:
Visualizar archivo de busqueda.php

Ahora la página que ofrecerá la interfaz para la búsqueda (que puede ser un simple html).
Primero que nada se debe tener el archivo de JQuery e insertarlo en la página:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Ahora bien, lo único que necesitamos es un input tipo text en el cual introducir el texto a buscar y un div el cual mostrará los resultados arrojados por el archivo de busqueda.php :


<input type="text" id="parametro" />
<br />
<br />
<div id="resultado" style="border: solid black 1px;"></div>

Y, por último, la "magia" de JQuery, con JavaScript se hará una función que, tanto al presionar una tecla como al soltarla mientras se esté escribiendo en el campo de texto, se extraiga el contenido del input, se envíe por POST a búsqueda.php y se recarge el div con el resultado obtenido:


<script type="text/javascript">
$(document).ready(function() {
$("#parametro").keydown( //Evento de presionar una tecla en el campo cuyo id sea "parametro"
function(event)
{
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#resultado").load('busqueda.php',{parametro:param}); //Y se envía por vía post al archivo busqueda.php para luego recargar el div con el resultado obtenido
}
);
});
$(document).ready(function() {
$("#parametro").keyup( //Evento de soltar una tecla en el campo cuyo id sea "parametro"
function(event)
{
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#resultado").load('busqueda.php',{parametro:param}); //Y se envía por vía post al archivo busqueda.php para luego recargar el div con el resultado obtenido
}
);
});
</script>

Pues nada difícil realmente, gracias a la ayuda de JQuery.

Para ver cómo resultaría implementado éste "buscador" aquí un ejemplo con una base de datos que se le han introducido 5 registro:

Para descargar el ejemplo, aquí el enlace de google drive:



7 comentarios:

  1. oye tengo una duda ¿es necesario tener el codigo del achivo busqueda por separado? por que he intentado modificar este condigo para eso pero no funciona y lo unico que hace es cargarme la misma pagina donde esta el formulario div, alguna idea de ¿pór que?

    ResponderEliminar
    Respuestas
    1. Sí, es necesario que el archivo que realiza la búsqueda sea uno aparte, ya que la librería JQuery lo que hace es enviar la petición (POST) a otra página (el archivo busqueda.php), recoge el resultado de la página y lo inserta en el DIV.

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Excelente amigo me funciono perfecto! solo que yo uso ORACLE y tuve q modificar todo el php jeje pero perfecto muchas gracias por el aporte!

    ResponderEliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  5. Buen ejemplo, me funcionó muy bien.
    Quisiera poder seleccionar una de las opciones que el buscador dinamico me va arrojando para que se autocomplete el campo de busqueda con mi selección y evitar tener que escribirlo todo. Cómo podría hacer esto? Gracias de antemano

    ResponderEliminar
  6. Muy buen ejemplo amigo, gracias por la ayuda.

    ResponderEliminar