Portada » JQuery biblioteca de JavaScript » Crear buscador en tiempo real con jQuery y PHP

Crear buscador en tiempo real con jQuery y PHP

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");
}

?>

 

Registrar alumnos para buscador PHP jQuery
Registrar alumnos para buscador PHP jQuery

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>
Crear buscador en tiempo real con jQuery y PHP
Crear buscador en tiempo real con jQuery y PHP

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.

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 4 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

2 comentarios en “Crear buscador en tiempo real con jQuery y PHP”

  1. Amigo Nestor, muchas gracias por tu amable aporte compartiendo su amplio conocimiento, me sirvió para adaptar el buscador a un proyecto, ¡¡¡ Muchas Bendiciones !!! y mil gracias…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad