Buscar en tiempo real con jQuery y Bootstrap

Tutoriales

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
  • ciadance

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

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

  • Ciborg_Ascend

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

    • 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

      cual seria el codigo actual?

  • Jorge Alejandro Zambrana

    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

  • HECTOR RIVERA

    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

    • 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

        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.

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