Come creare una casella di testo per il filtro di ricerca in Jquery?

Question

Supponendo che ho una struttura div con una casella di testo:

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

voglio fare in modo che inizialmente .. dicono che mostra 3 anitems, voglio fare in modo che, se l'utente ha alcun carattere digitato in nella casella di ricerca, mostrerebbe solo i div che corrispondono alla voce che l'utente sta digitando.

Es. Quindi se l'utente digita "D", nasconderebbe tutti gli altri div senza "D" nel "nome oggetto". Se l'utente digita un'altra lettera "og", l'unico div che verrebbe mostrato è il div con "nome oggetto" di "Dog" Se l'utente preme il tasto canc per rimuovere la "g", quindi i due div "Cane" e "Doodle Bird" saranno mostrati. Se l'utente cancella tutto ciò che ha digitato nella casella di testo, verranno visualizzati tutti gli anitemi.

Come posso realizzare questo se possibile? Penso che potrei dover usare .live() ma non sono sicuro.

Answer 1

Si dovrà gestire l'evento keyup (che viene cliccato dopo tasto viene rilasciato) quindi utilizzare .filter() per trovare elementi corrispondenti, mostrando i loro genitori.

$("#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

si desidera gestire l'evento KeyUp e penso che si può fare questo:

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

Answer 3

Se si desidera filtrare i tipi di utente, si dovrebbe collegare un gestore di eventi per il testo keypress^{[API Ref]} Evento. Ogni volta che l'utente preme un tasto, è possibile filter^{[API Ref]} il contenuto del #listofstuff e sia show^{[API Ref]} o hide^{[API Ref]} esso.