Buscar en tiempo real con jQuery 2 y Bootstrap 3

Nube Colectiva

hace 9 años

En esta página:

Demo Github

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


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

<span class="input-group-addon">Buscar</span>

</div>

<thead>

<tr>

<th>Canción</th>

<th>+ (Array)</th>

<th>Reproducir</th>

</tr>

</thead>

Aca van nuestros items.

</tbody>

</table>

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

script.js


$(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));

});

$(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 !