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

Últimas noticias

  • Como aprender programación web
  • Aprende fácilmente
    Html
  • Nitrokod infecta a más de 111.000 usuarios
  • Minar activamente criptomonedas
    Actualidad
  • Vulnerabilidades explotadas
  • 10 nuevas vulnerabilidades explotadas activamente añadidas al catálogo de CISA
    Actualidad

Categorías

Actualidad

  • Como borrar Windows.old
  • Recupera espacio de tu disco
  • Vulnerabilidades explotadas
  • 10 nuevas vulnerabilidades explotadas activamente añadidas al catálogo de CISA
  • Google neutraliza el mayor ataque DDoS HTTPS
  • En sólo dos minutos, el ataque pasó de 100.000 RPS
  • Como aprender programación web
  • Aprende fácilmente
  • Crear página web GRATIS
  • ¿Quieres una página web gratis?
Conexión PHP MYSQL
  • Conexión PHP MYSQL
  • Como crear Conexión PHP MYSQL
Subir archivos servidor - PHP y JQUERY
  • Subir archivos servidor - PHP y JQUERY
  • Como subir archivos servidor html
BUSCADOR con FILTROS php mysql
  • BUSCADOR con FILTROS php mysql
  • Filtros de búsqueda con php
Buscador PHP MYSQL AVANZADO
  • Buscador PHP MYSQL AVANZADO
  • Buscador Avanzado
Validar formulario con javascript Rápido y Sencillo
  • Como Validar formulario con javascript Rápido y Sencillo
  • Validar formulario
INSERTAR DATOS en MYSQL con PHP
  • INSERTAR DATOS en MYSQL con PHP - Español - Muy sencillo
  • insertar datos MYSQL con PHP
Carrito de compras con PHP
  • Carrito de compras con PHP Español
  • Carrito de compra en tu página web
BUSCADOR PHP MYSQL AVANZADO
  • Buscador PHP mysql avanzado SIN RECARGAR - Buscador en php y mysql fácil y rápido sencillo
  • BUSCADOR PHP MYSQL AVANZADO
Cursos de programación

© Copyright. Todos los derechos reservados.