Hay ocasiones en las que al crear una aplicación web nos encontramos con la necesidad de implementar un buscador para mostrar solo los resultados que el cliente desea. Hasta ahora sólo se podía hacer a través de programación y consultas a la base de datos. Pero gracias al maravilloso JQuery, podemos implementar un buscador que no consuma recursos al servidor.

Ventajas:

1. - Consumo de recursos del servidor
2. - Transferencia de datos
3. - Velocidad de respuesta

Desventajas:

1. - Los resultados a buscar deben encontrarse dentro del html de la página.

Pongamos que en nuestra web tenemos la siguiente lista:

• Marca: Ford - Coches: focus, escort
• Marca: Renault - Coches: Megane,clio
• Marca: Peugeot - Coches: 403, boxer
• Marca: Mazda - Coches: 323,626

 Cada una de las lineas, es un elemento <li>, que pertenecen al elemento <ul>. Para empezar, añadiremos la clase indexable a dicho elemento. quedando de la siguiente manera:

<ul class="indexable">
<li>Marca: Ford - Coches: focus, escort</li>
<li>Marca: Renault - Coches: Megane,clio</li>
<li>Marca: Peugeot - Coches: 403, boxer</li>
<li>Marca: Mazda - Coches: 323,626</li>
</ul>

Ahora, crearemos la funcion en JQuery que será llamada para realizar la búsqueda.

Para ello empleamos la función :contains() que nos permite saber si el objeto contiene dicho texto.

function buscar(que)
{
    $('.indexable li').hide(0,function(){ //Oculta todos los resultados

        if($('.indexable:animated').length===0) //Previene repeticiones de la animacion
        {
                $('.indexable li:contains('+que+')').show() //Muestra solo los objetos que coinciden con el resultado
        }
    })

}
//PrestaPresta.com

 Y por último, el campo de Buscar que añadiremos a nuestro formulario. Es un simple campo de texto de formulario al que le añadimos la llamada a la función mediante el evento onkeyup, que hace que el script solo se ejecute cuando se levanta el dedo de la tecla (siempre que sea dentro del campo de texto). Así es como quedaría el código html de nuestro campo

        <input type="text" class="form-control" id="buscador" onkeyup="buscar(this.value)" placeholder="Buscar ">

 IMPORTANTE:

Éste código es sensible a mayúsculas y minúsculas, si deseas hacer una búsqueda sin diferenciar entre éstas deberás añadir al principio del código Javascript (no dentro de la función, y después de JQuery) las siguientes lineas. El código varía según tu versión de JQuery.

Versiones anteriores a 1.8

// NEW selector
jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

Versiones posteriores a 1.8 (ésta incluida)

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});