Mostrando y ocultando capas con text input

[Alexis88]

Creo que buscas hacer algo como esto. Sería más sencillo si lo hicieras filtrando los datos con una consulta a una base de datos pues ahí existe el operador de comparación LIKE, el cual permite hacer búsquedas entre los datos almacenados en la base de datos con cualquier caracter escrito en una caja de texto. Sin embargo, he realizado en JavaScript algo que emula dicho comportamiento.

Código HTML:

<label for = "buscar">Escribe el nombre del plato:</label>
<input type = "text" id = "buscar" placeholder = "Nombre del plato" autofocus />
<section>
    <div>
        <img src = "lentejas.jpg" />
        <span>Lentejas con arroz</span>
    </div>
    <div>
        <img src = "espinacas.jpg" />
        <span>Ensalada de espinacas</span>
    </div>
    <div>
        <img src = "frutas.jpg" />
        <span>Ensalada de frutas</span>
    </div>
    <div>
        <img src = "trigo.jpg" />
        <span>Guiso de trigo</span>
    </div>
    <div>
        <img src = "tomate.jpg" />
        <span>Encebollado con tomate</span>
    </div>
</section>
 

Código Javascript:

var buscar = document.getElementById("buscar"),
    platos = document.getElementsByTagName("span"),
    forEach = Array.prototype.forEach;
 
buscar.addEventListener("keyup", function(e){
    var texto = this.value;
  
    forEach.call(platos, function(p){
        if (p.innerHTML.toLowerCase().search(texto.toLowerCase()) == -1)
            p.parentNode.style.display = "none";        
        else
            p.parentNode.style.display = "block";        
    });
}, false);
 

El procedimiento es sencillo. Cada vez que el usuario suelte una tecla luego de pulsarla (evento keyup), se buscará por cada elemento <span> (que son los que contienen los nombres de cada plato), la coincidencia entre su contenido y el del texto escrito en la caja de texto, para lo cual, primero convertimos a minúsculas a ambos valores (método toLowerCase) para evitar diferencias con mayúsculas y luego, utilizando el método search, obtenemos la posición del texto escrito en el contenido de cada <span>. Para que se entienda mejor esto, el contenido de cada <span> equivale a un array de caracteres, en donde cada caracter es un elemento del array, por lo que la primera letra está ubicada en la posición cero. Por ejemplo, si escribo la palabra ensalada y el contenido del <span> es Ensalada de frutas, obtendremos la posición cero pues es en la que se ubica la palabra que escribimos con respecto al contenido del <span>, recordando siempre que la primera posición es cero.

Este método (search), devuelve -1 cuando no se encuentran coincidencias, por lo que si esto es así, ocultamos el nodo padre del <span> que viene siendo el <div>, caso contrario, lo mostramos.

Te dejo el código completo: http://jsfiddle.net/Alexis88/rEdSk/

Saludos

EDITO: Había olvidado que estamos en el sub-foro de jQuery.

Aquí tienes este mismo ejemplo pero implementado con la librería jQuery:

Código Javascript:

var platos = $("span");
 
$("#buscar").keyup(function(e){
    var texto = $(this).val();
 
    platos.each(function(){
        if ($(this).html().toLowerCase().search(texto.toLowerCase()) == -1)
            $(this).parent().hide();
        else
            $(this).parent().show();
    });
});
 

El resultado es exactamente el mismo que con el código nativo de JS: http://jsfiddle.net/Alexis88/rY4HX/