Buscar en tiempo real con jQuery 2 y Bootstrap 3
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="input-group"> <span class="input-group-addon">Buscar</span> <input id="filtrar" type="text" class="form-control" placeholder="Ingresa la canción de este Disco que deseas Buscar..."> </div> <table class="table table-hover"> <thead> <tr> <th>ID</th> <th>Nº</th> <th>Canción</th> <th>+ (Array)</th> <th>Reproducir</th> </tr> </thead> <tbody class="buscar"> Aca van nuestros items. </tbody> </table> |
Ahora crearemos nuestro código jquery para poder realizar la búsqueda en Tiempo Real:
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(document).ready(function () { (function ($) { $('#filtrar').keyup(function () { var rex = new RegExp($(this).val(), 'i'); $('.buscar tr').hide(); $('.buscar tr').filter(function () { return rex.test($(this).text()); }).show(); }) }(jQuery)); }); |
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
Artículos Relacionados
Como crear un Archivo SVG con Adobe Photoshop CC y otros detalles
Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 1
Como crear el Efecto modo Oscuro – Claro en un Sitio Web con CSS 3 y JavaScript
Creando una Aplicación Android que responda ante comandos de Voz mediante Inteligencia Artificial y Machine Learning – Parte 8
Como Leer un archivo JSON en Android (Android Studio 3.6.1 + Java) – Parte 1
Como Crear una Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 4 (Final)
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.
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.
cual seria el codigo actual?
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
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.
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.
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.