如何在Jquery中创建搜索过滤器文本框？
问题描述：
假设我有一个div结构，一个文本框：如何在Jquery中创建搜索过滤器文本框？
<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>
我想要让这个最初..说，这表明3 anitems，我想让它这样，如果用户有键入任何字符在搜索框中，它只会显示与用户输入的条目匹配的div。
Ex。因此，如果用户键入“D”，它将隐藏“项目名称”中没有“D”的所有其他div。 如果用户输入另一个字母“og”，则将显示的唯一div是“Dog”的“项目名称”的分区 如果用户点击删除键删除“g”，则两个div将展示“狗”和“涂鸦鸟”。 如果用户删除它们在文本框中键入的所有内容，则所有的anitems都会显示出来。
如果可能，我该如何做到这一点？我想我可能不得不使用.live（），但我真的不确定。
答
你将不得不处理keyup事件（这被点击键被释放后），然后使用.filter()找到匹配的项目，显示出他们的父母。
$("#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();
});
答
你要处理的keyup事件，我想你可以这样做：如果你想过滤的用户类型
$('div').each(function() {
$(this).toggle($(this).children('span.itemname').text() == yourVar);
});