Buscador en tiempo real con Ajax

Desarrollo de un buscador usando el evento keyup con Jquery, Php, Mysql con respuesta en tiempo real

Tener un buscador en una página web es relevante siempre y cuando nuestro sitio web, tenga una sección dinámica sea un sección de noticias, un blog, etc. y que ademas sean de constante actualización e inserción de publicaciones. Es ahi donde un buscador tiene una razón de existir apropiada.

QUÉ ES UN BUSCADOR WEB

Son aquellos buscadores de contenidos que requieren de una estrategia de búsqueda a partir de palabras claves o frases, buscan y recuperan la información que responde a esa descripción. Bien partiendo de esta definición podemos sintetizar que es una sección de nuestra página destinada a proporcionar información de acuerdo a una consulta realizada por el usuario.

PLANTEAMIENTO DEL BUSCADOR

Es decir para que vamos a construir el buscador para ello  vamos a suponer que tenemos una web de consulta de usuarios.

Entonces debemos crear una base de datos con una tabla llamada usuarios:

BASE DE DATOS BUSCADOR

Abrimos el XAMPP, y creamos una base de datos llamada buscador agregando una única tabla llamada usuarios. el codigo para la tabla es

CREATE TABLE `usuarios` (
  `id` int(11) NOT NULL,
  `nombre` varchar(100) NOT NULL,
  `bio` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `usuarios`
  ADD PRIMARY KEY (`id`);

Para gestionar la conexión a la base de datos y realizar las consultas necesarias trabajaremos con la siguiente clase PHP del link clase de conexión y consulta MYSQL en php

CREANDO NUESTRA APLICACIÓN WEB

Entonces, usando sublime text creamos un documento html que contendrá la columna de nuestra app y agregamos dos recursos dentro del head.

ADICIONANDO LOS RECURSOS

<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.js"></script>
  • La librería responsive de boostrap

  • Y la librería Jquery

DISEÑANDO LA INTERFAZ

Aqui agregamos los elementos html como son el input que es el más importante, para ello usamos un componente de bootstrap

<div class="input-group mb-3">
		  <input type="text" class="form-control" id="txtbusca" placeholder="Buscar" aria-label="Buscar" aria-describedby="basic-addon2">
		  <div class="input-group-append">
		    <span class="input-group-text" id="basic-addon2">BUSCAR</span>
		  </div>
</div>
<div class="salida"></div>

Entonces al input text le agregamos un identificador llamado txtbusca, ademas de crear un div con el id salida que el que se llenará con los resultado de la consulta.

DOTANDO DE INTERACTIVIDAD A LA APP WEB

Aqui vamos a programar la interactividad con Javascript usando la librería Jquery, explicando la funcionalidad tenemos un input text con el id txtbusca  con jquery escuchamos cada vez que se presiona una tecla cualquiera, esta acción lanza el evento keyup que captura el value es decir el caracter digitando en el input, con el método ajax lo enviamos a un documento php llamado salida.php, donde se realiza una consulta que retorna las coincidencias con la consulta. y se muestran en la web.

Código Jquery.

$(document).ready(function(){
			$("#txtbusca").keyup(function(){
				var parametros="txtbusca="+$(this).val()
				$.ajax({
	                data:  parametros,
	                url:   'salida.php',
	                type:  'post',
	                beforeSend: function () { },
	                success:  function (response) {                	
	                    $(".salida").html(response);
	                },
	                error:function(){
	                	alert("error")
	                }
            	});
			})
})

En el método success mostramos o cargamos lo que retorna nuestro ajax, en el div con  la clase .salida donde estarán las respuestas de la consulta de salida.php.

OBTENCIÓN DE LOS RESULTADOS DE LA CONSULTA.

Es el archivo donde se procesa la consulta veamos el código salida.php

<?php 
if(isset($_POST['txtbusca'])):
	include "conexion.php";
	$user=new ApptivaDB();	
	$u=$user->buscar("usuarios"," nombre like '%".$_POST['txtbusca']."%'");
	$html="";
	foreach ($u as $v)
		$html.="<p>".$v['nombre']."</p>";
	echo $html;
else:
	echo "Error";
endif;
 ?>
  1. Se verifica si existe la peticion http de txtbusca,

  2. Si es asi, incluimos la conexiòn a la base de datos y los instanciamos

  3. Realizamos una consulta a la tabla usuarios donde nombre tenga una coincidencia con el texto del post txtbusca.

  4. Creamos una variable de texto para concatenar los resultados parseados en párrafos con la estructura foreach

  5. Luego pintamos el html.

  6. Si la verificación de la petición http falla, entonces muestra un mensaje de error.

Entonces como ven, es una aplicación sencilla que hace uso de ajax para refrescar una sección de la página web sin la necesidad de recargar todo el documento html.

 

VIDEO Como programar un buscador en tiempo real con Ajax

Código fuente completo de Buscador en tiempo real con Ajax

DESCARGAR

Visitas: 211 | Publicado:2018-11-20 13:32:21

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::