Buscador en tiempo real
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">Buscar</button> </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());"
<button class="btn btn-outline-success" type="submit">Buscar</button> </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/<?php echo $resultado["img"]; ?>.jpg" alt=""> <div class="card-body"> <p class="card-text"><?php 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">Detalles</button> <button type="submit" class="btn btn-sm btn-outline-secondary">Añadir al carrito</button> <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"><?php 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.
✅APOYA EL CANAL Y HAZ TU DONATIVO Con tu ayuda seguiremos metiendo grandes contenidos gratuitos
https://www.paypal.com/donate/?hosted_button_id=THNVXGYTKHJ4G
💾 Descarga los archivos del tutorial:
Descargar
Aquí tienes la demo
Demo
SUSCRIBETE AL CANAL
Es totalmente gratis y tendras acceso a todo el contenido de forma gratuita.
Haz tu donación
Te agradezco un aporte para que pueda seguir añadiendo contenido gratuito a cursos de programación gratis para que puedas ser un gran programador. Recuerda que gracias a tu donativo esta página de cursos de programación podra seguir creciendo
Ayudanos a continuar.
Últimos cursos
Paginar consulta con PHP
27/07/2022
Aplicación web PHP
16/05/2022
Buscador en tiempo real
07/05/2022
Crear carrito de compras
28/04/2022
Enlaces Amigables
24/03/2022
Como crear un carrito de compras Parte2
11/03/2022
Como crear un carrito de compras Parte 1
11/03/2022
Carrito de compras con PHP y MYSQL
11/03/2022
Cómo crear un bot de telegram
27/02/2022
Buscador Javascript en tiempo real
26/01/2022SUSCRIBETE AL CANAL
Es totalmente gratis y tendras acceso a todo el contenido de forma gratuita.
Cursos gratis de programacion
Si lo que estas buscando son cursos gratuitos de programación, nosotros tenemos una gran variedad de cursos gratis para que avances rápidamente y aumentes tu nivel de programación. Accede a cursos gratis de programación
Curso de programación php
Aún no sabes todo lo que te ofrecemos con nuestros curso de programación php?
Tenemos más de 100 cursos gratuitos de programación php para que te conveiertas en el mejor programador del momento.
- · Programación php
- · Cursos de programación php
- · Cursos de programación php GRATIS
- · Cursos gratuitos de programación php
- · Cursos gratis de php
- · Cursos gratis de programación php