Grandes oportunidades

Buscador en tiempo real

Php - Mysql - Javascript


26/08/2022


Buscador en tiempo real

Descripción

Ahora puedes crear un fantástico buscador en tiempo real con php mysql en un tiempo récord.
Para tener tu propio buscador en tiempo real en tu página web o tienda online solo tendrás que realizar unos sencillos pasos que te muestro a continuación
Solo tienes que seguir estos pasos que te muestro a continuación para crear tu buscador en tiempo real para tu pagina web o tienda online.
Te sorprenderá!
======================================== 😎 Suscríbete al canal https://www.youtube.com/c/CURSOSDEPROGRAMACIÓN =========================================
Para realizar nuestro buscador en tiempo real tendrás que tener dos archivos, el primero "index.php" y el segundo y mas importante "buscador.php" estos dos archivos tendrán una función vital para que tu buscador en tiempo real funciona perfectamente en tu página web.
Dentro de nuestro archivo "index.php" insertaremos total la parte del Frontend de nuestro buscador en tiempo real. Esta parte tendrá insertado el formulario donde recogeremos el campo que queremos buscar.

 

      <form class="d-flex">

        <input class="form-control me-2" id="buscar" name="buscar" aria-label="Search">

        <button class="btn btn-outline-success" type="submit">Buscarbutton>

      form>

 

Como veis nuestro formulario "form" no tiene ninguna etiqueta de "action" ya que lo que haremos será enviar los datos a través de "ajax" y para que funcione correctamente no tenemos que insertar dicha etiqueta en nuestro formulario.
Por otro lado tampoco será necesario que tengamos el botón de "buscar" ya que al ser un buscador en tiempo real con ajax la búsqueda se realizará de forma inmediata entonces nuestro "form" quedará de la siguiente forma.

 

      <form class="d-flex">

  <input class="form-control me-2" id="buscar name="buscar" onkeyup="buscar_ahora($("#buscar").val());"
 type="search" placeholder="buscar" aria-label="Search">

        <button class="btn btn-outline-success" type="submit">Buscarbutton>

      form>

 

Como ves en nuestro "input" hemos añadido la línea de "onkeyup" ejecutando una función cada vez que se presiona cualquier tecla.
Esta función es "buscar_ahora" y le pasaremos el campo de buscar.
La función del buscador en tiempo real es la siguiente.

 

        function buscar_ahora(buscar) {

        var parametros = {"buscar":buscar};

        $.ajax({

        data:parametros,

        type: "POST",

        url: "buscador.php",

             success: function(data) {

        document.getElementById("datos_buscador").innerHTML = data;

        }

        });

        }

        buscar_ahora();

 

Tal y como ves en nuestra función que pasaremos por "javascript" lo que estamos realizando es pasar el campo de buscar y enviarlo mediante "POST" a "buscador.php".
Un buscador en tiempo real con ajax lo que realiza es una búsqueda al momento sin la necesidad de recargar nuestra web y por ello al realizar la función mostramos el resultao en "datos_buscador"

 

  document.getElementById("datos_buscador").innerHTML = data;

 

Con lo cual tendremos que tener creado un "div" con la "id" "datos_buscador"
quedando de la siguiente forma.

 

  <div id="datos_buscador" class="container col-12 row">div>

 

Una vez tengamos estos campos pasaremos al paso numero dos de nuestro buscador en tiempo real.
Vamos a el archivo "buscador.php"
Aquí lo primero que haremos será incluir nuestra conexión para que nuestra consulta a la base datos funcione correctamente.

 

   include ("conexion.php");

 

Seguidamente realizaremos nuestra consulta a través de una consulta SQL

 

  $buscardor=mysqli_query($conexion,"SELECT * FROM articulos WHERE nombre

   LIKE LOWER(%".$_POST["buscar"]."%)");

 

En nuestra base de datos para nuestro buscador en tiempo real ajax tenemos creada la tabla "articulos" donde realizaremos la búsqueda a la fila de "nombre" a través de un "LIKE LOWER"  a "$_POST["buscar"]".
Esta parte lo que quiere decir es que me busque todo lo que sea igual o parecido a "buscar".
Para mostrar los resultados lo haremos a través de un "WHILE" para así realizar un bucle de todo el contenido que encuentre.

 

   while($resultado = mysqli_fetch_assoc($buscardor)){

 

Una vez hagamos nuestro WHILE pondremos el resultado que queremos mostrar ya sea con un simple ECHO o realizando algo más creativo a través de un "div"
Aquí os dejo la muestra de la demostración.

 

  <div class="col-4">

  <div class="card shadow-sm">

  <img src="img/ echo $resultado["img"]; ?>.jpg" alt="">

  <div class="card-body">

    <p class="card-text"> echo $resultado["nombre"]; ?>p>

    <div class="d-flex justify-content-between align-items-center">

      <div class="btn-group">

     

      <form id="formulario" name="formulario" method="post" action="cart.php">

     

        <button type="button" class="btn btn-sm btn-outline-secondary">Detallesbutton>

        <button type="submit" class="btn btn-sm btn-outline-secondary">Añadir al carritobutton>

          <input name="ref" type="hidden" id="ref" value="mu001" />                          

          <input name="precio" type="hidden" id="precio" value="200" />

          <input name="titulo" type="hidden" id="titulo" value="Mueble madera moderno" />

          <input name="cantidad" type="hidden" id="cantidad" value="2" class="pl-2" />

 

      form>

 

      div>

      <small class="text-muted"> echo $resultado["precio"]; ?>small>

    div>

  div>

div>

div>

 

Aquí como veis estoy mostrando todo el contenido que quiero mostrar como la imagen, el nombre, el precio.
Todo este contenido se mostrará de forma inmediata al momento de estar tecleando sobre nuestro "input".

Con estos sencillos pasos podrás crear un buscador en tiempo real en un tiempo record y con unos sencillos pasos.
A continuación te dejo la demostración como la descarga de los archivos para que tengas una mayor ayuda para realizar tu buscador en tiempo real con php.

VER DEMOSTRACIÓN

DESCARGA


© Copyright. Todos los derechos reservados.