Buscar en tiempo real con jQuery 2 y Bootstrap 3

Frontend jQuery Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

Sabemos del Potencial de jQuery y de Bootstrap, pero que pasa si juntamos ambas tecnologías, pues nace una aplicación muy interesante, como la que a continuación crearemos.

Vamos a crear un buscador de música en tiempo real, es decir que mientras vayamos digitando los primeros caracteres del ítem que deseamos buscar, la aplicación nos vaya mostrando los resultados coincidentes con esos primeros caracteres escritos.

Imaginemos que la base de datos sera de Spotify, es decir usaremos ítems de su catalogo musical como ítems a buscar en Tiempo Real.

Bueno vamos por el articulo.

Primero creamos nuestra caja de texto para escribir lo que deseamos Buscar y una tabla Bootstrap para listar las canciones:

index.php

 

Ahora crearemos nuestro código jquery para poder realizar la búsqueda en Tiempo Real:

script.js

En la demo pueden ver como trabaja en tiempo real.

Espero les sea de mucha utilidad este Articulo.

Hasta nuestro siguiente Artículo o Tutorial !

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
11 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
ciadance
ciadance
3 años atrás

tengo 8000 filas en una tabla pero como hago para buscar al dar clic en boton buscar mas no en tiempo real

Collective Cloud Peru
Collective Cloud Peru
Reply to  ciadance
3 años atrás

Puedes usar paginacion con jquery ajax. Asi solo cargas cierta cantidad de registros por página.

Ciborg_Ascend
Ciborg_Ascend
3 años atrás

Muy buen ejemplo. Solo comentarles que algunas instrucciones del código ya se quedaron defasadas..

Collective Cloud Peru
Collective Cloud Peru
Reply to  Ciborg_Ascend
3 años atrás

Gracias por visitarnos, si el tutorial fue hace tiempo, pero sirve como referencia, si tienen el codigo actualizado compartanlo en los comentarios para ayudar a los que la necesitan.

alejandro
alejandro
Reply to  Ciborg_Ascend
3 años atrás

cual seria el codigo actual?

Jorge Alejandro Zambrana
Jorge Alejandro Zambrana
3 años atrás

Hola, estoy empezando con esto y para empezar decidi hacer un buscador tipo google, pero no se si alguien me puede decir donde puedo encontrar el codigo completo?, para ver como va el codigo con la base de datos? Agradezco de antemano

Collective Cloud Peru
Collective Cloud Peru
Reply to  Jorge Alejandro Zambrana
3 años atrás

Hola en este ejemplo estamos empleando una base de datos en este caso de Spotify, ellos nos brindan los datos en formato JSON, tu lo puedes hacer es lo mismo, por ejemplo tienes una base de datos MySQL y lo conviertes a JSON con PHP, te dejamos este tutorial y ejemplo: https://blog.nubecolectiva.com/convertir-nuestros-registros-mysql-a-json-con-php/ Convertido a JSON lo importas al codigo jquery tal cual este ejemplo, solo dedícale un tiempo y con paciencia lograrás hacerlo.

HECTOR RIVERA
HECTOR RIVERA
3 años atrás

e codigo funciona bien, pero yo tengo un grid co paginacion y tengo como 500 registros el solo busca los datos en la pagina que se encutra actualmente, alguien me da una mano

Collective Cloud Peru
Collective Cloud Peru
Reply to  HECTOR RIVERA
3 años atrás

No se si sera suficiente una páginacion nada mas, es decir los registros que se muestran en la página los jala de una base de datos en JSON y al paginar los registros es como si escondieras todos los demas registros y vas paginando en 10 registros por página, el buscador igual los va buscar asi este en la pagina numero 300, en conclusion pagina los registros de la pagina nada más.

HECTOR RIVERA
HECTOR RIVERA
Reply to  Collective Cloud Peru
3 años atrás

bueno, en mi caso la base de datos esta en mysql, y yo traigo todos los datos con php, pero a un asi cuando busco un registro, si el registro no existe dentro 10 que se encutran en la pagina actual, no lo encentra. mm la verdad no se que hacer.

Collective Cloud Peru
Collective Cloud Peru
Reply to  HECTOR RIVERA
3 años atrás

Quizás lo estas ocultando del DOM, debes simular la invisibilidad de los registros mas no ocultarlos.