Crear buscador en tiempo real con jQuery y PHP. Casi la gran mayoría de personas que interactúan con el internet han utilizado un servicio de búsquedas, ya sea un buscador web y/o en un plataforma web. Por lo tanto, en este artículo nos enfocaremos en plasmar un pequeño buscador que utilizara como tecnología para filtrar al lenguaje jQuery que le dará el dinamismo que deseamos para realizar búsquedas en vivo.
Crear buscador en tiempo real con jQuery y PHP
Ya la mayoría de programadores conocen el potencial de jQuery y de Bootstrap para el desarrollo de sus aplicaciones. Sin embargo, aquí lo combinaremos para desarrollar un buscador muy dinámico.
Lo que haremos es crear un buscador de alumnos en tiempo real, con datos extraídos de una base de datos y que los resultados lo mostraremos en tablas HTML.
¿Cómo funciona el código?
El buscador es muy interactivo mientras estamos digitando en una input las iniciales del alumno, este mostrara de manera dinámica y sin refrescar la página las posibles alternativas que deseamos encontrar.
Estructura de este ejemplo
Archivo «php_busqueda.sql». Este fichero contiene la tabla que tiene que ser almacenada en una base de datos. Sin embargo, esta tabla será el motor de almacenamiento para este ejercicio. Por lo tanto, en el ingresaremos información y/o solicitaremos datos.
CREATE TABLE `alumnos` ( `id_alumn` int(11) NOT NULL, `nombres` varchar(200) NOT NULL, `celular` varchar(80) NOT NULL, `email` varchar(120) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT; -- -- Volcado de datos para la tabla `alumnos` -- INSERT INTO `alumnos` (`id_alumn`, `nombres`, `celular`, `email`) VALUES (2, 'Flores Gutierrez', '00-98277-0', 'mimail2@dominio2.com'), (3, 'Mena Garcia, Maria Fernanda', '00-985654', 'mi-correo2@mi-dominio.com'), (4, 'Flores Figueroa, Luis Armando', '00-985654', 'floresfilu@mi-dominio.com'); -- -- Indices de la tabla `alumnos` -- ALTER TABLE `alumnos` ADD PRIMARY KEY (`id_alumn`); -- -- AUTO_INCREMENT de la tabla `alumnos` -- ALTER TABLE `alumnos` MODIFY `id_alumn` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
Fichero «db.php». Este archivo PHP contendrá los elementos necesarios para conectarse con la base de datos.
<?php
// simple conexion a la base de datos
function connect(){
return new mysqli("localhost","root","root","php_busqueda");
}
?>El archivo «registro.php». Este fichero será el encargado de registrar la información a la base de datos, mediante un formulario HTML.
<form id="frmLogin" action="" method="post">
<fieldset>
<div class="form-group">
<label for="Apellidos">Apellidos y Nombres:</label>
<input required type="text" class="form-control" name="apenom" placeholder="Ingrese Apellidos y nombres" value="">
</div>
<div class="form-group">
<label for="celular">Celular:</label>
<input required class="form-control" type="text" name="celular" placeholder="Ingrese celular" value="">
</div>
<div class="form-group">
<label for="email">E-Mail:</label>
<input required class="form-control" type="email" name="email" placeholder="Ingrese E-mail" value="">
</div>
<input type="hidden" name="btnguardar" value="v">
<input class="btn btn-primary" type="submit" value="Registrar Alumno">
</fieldset>
</form>Código PHP con el cual se ingresa información a la base de datos
<?php
// Agregamos el fichero de conexión
include "db.php";
// Condicional para almacenar la información
if(isset($_POST["btnguardar"])){
$con = connect();
$nombres=$_POST['apenom'];
$celular=$_POST['celular'];
$email=$_POST['email'];
// Ingresamos la información a la base de datos
$con->query("insert into alumnos (nombres, celular, email) value ('$nombres', '$celular', '$email')");
// Una vez ingresado el registro lo redireccionamos a la página principal
header("Location: index.php?option=ok");
}
?>
Vamos a ver la parte del jQuery que hace el filtro mediante estas líneas de código.
<script type="text/javascript">
$(document).ready(function () {
(function($) {
$('#FiltrarContenido').keyup(function () {
var ValorBusqueda = new RegExp($(this).val(), 'i');
$('.BusquedaRapida tr').hide();
$('.BusquedaRapida tr').filter(function () {
return ValorBusqueda.test($(this).text());
}).show();
})
}(jQuery));
});
</script>
CONCLUSIÓN
La implementación de esta forma de realizar búsquedas es muy recomendable para todo sistema web. Por lo tanto, con la implementación de este método lograremos no asfixiar al servidor, si estuviéramos usando un servidor compartido.
Este método trabaja en la parte del navegador, ahorrando recursos al servidor. Espero que esta pequeña explicación les ayude en sus proyectos que estén realizando y no se olviden de seguirme en las redes sociales y suscribirse al boletín.
