¿Cómo creo un cuadro de texto de filtro de búsqueda en Jquery?

Question

Suponiendo que tengo una estructura div con un cuadro de texto:

<input id="filter" type="text" name="fname" /><br /> 
<input type="text"> 
<div id="listofstuff"> 
    <div class="anitem"> 
     <span class="item name"Dog</span> 
     <span class="itemdescruption">AboutItem1</span> 
    </div> 
    <div class="anitem"> 
     <span class="item name">Doodle Bird</span> 
     <span class="itemdescruption">AboutItem2</span> 
    </div> 
    <div class="anitem"> 
     <span class="item name">Cat</span> 
     <span class="itemdescruption">AboutItem3</span> 
    </div> 
</div> 

quiero hacerlo de modo que en un principio .. dicen que muestra 3 anitems, quiero hacerlo de modo que si el usuario tiene ningún carácter escrito en el cuadro de búsqueda, solo mostraría los divs que coinciden con la entrada que está escribiendo el usuario.

Ej. Entonces, si el usuario escribe "D", ocultaría todos los demás divs sin "D" en el "nombre del elemento". Si el usuario escribe otra letra "og", entonces el único div que se mostraría es el div con "nombre del elemento" de "Perro" Si el usuario pulsa la tecla eliminar para eliminar la "g", entonces los dos divs "Perro" y "Doodle Bird" se mostrarán. Si el usuario elimina todo lo que escribieron en el cuadro de texto, aparecerán todos los elementos.

¿Cómo puedo lograr esto si es posible? Creo que tendré que usar .live() pero realmente no estoy seguro.

Answer 1

Tendrá que manejar la keyup evento (que se hizo clic después se suelta la tecla) y luego use .filter() a encontrar artículos a juego, mostrando sus padres.

$("#filter").bind("keyup", function() { 
    var text = $(this).val().toLowerCase(); 
    var items = $(".item_name"); 

    //first, hide all: 
    items.parent().hide(); 

    //show only those matching user input: 
    items.filter(function() { 
     return $(this).text().toLowerCase().indexOf(text) == 0; 
    }).parent().show(); 
}); 

Live test case.

Answer 2

desea manejar el evento keyup y creo que se puede hacer esto:

$('div').each(function() { 
    $(this).toggle($(this).children('span.itemname').text() == yourVar); 
}); 

Answer 3

Si desea filtrar mientras el usuario escribe, debe adjuntar un controlador de eventos del cuadro de texto keypress^{[API Ref]} evento. Cada vez que el usuario pulsa una tecla, se puede filter^{[API Ref]} el contenido de #listofstuff y bien show^{[API Ref]} o hide^{[API Ref]} ella.