[SOLUCIONADO] Mostrando y ocultando capas con text input

[suudobal]

Buenas a todos,

Estoy haciendo un listado de ingredientes con fotos en pequeñas fichas. El caso es que muestro en una página esas fichas y puede haber en algunos casos como 30 ingredientes. Mi idea entonces es poner un text input encima del todo el listado y al ir escribiendo sólo se van mostrando los ingredientes que tengan en el nombre lo escrito en el input. Sería así la organización de las capas principales de manera muy resumida:

Código HTML:

<input type="text" id="buscar">
 
<div><span>Arroz</span></div>
<div><span>Sal</span></div>
<div><span>Pimienta</span></div>
<div><span>Pollo</span></div>
<div><span>Poleo</span></div>
 

Entonces al empezar a escribir "A" se mostraría solo la capa div con todo el contenido donde el span es Arroz. Si empiezo a escribir "P" pues se mostrarían sólo los div de Pimienta, Pollo y Poleo... si sigo con "Po" pues sólo se ven los de Pollo y Poleo. No se si me explico. Pero también se mostraría sólo, por ejemplo la de pollo si escribo "llo" ya que es la única que lo contiene.

¿Conocéis algún recurso o algo parecido? ¿O alguna idea en jQuery para implementarlo?

[hhs]

Puedes usar algún plugin de auto completar. Aqui hay un articulo de como implementar uno: http://designshack.net/articles/java...-html5-jquery/

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

[suudobal]

Espectaculares vuestras aportaciones, como siempre. Pruebo lo que me decís y os comento.