假设我的div
结构带有文本框:
<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用户输入的条目。
实施例。因此,如果用户键入“D”,它将隐藏“项目名称”中没有“D”的所有其他div。 如果用户键入另一个字母“og”,那么唯一显示的div就是“项目名称”为“狗”的div 如果用户点击删除键以删除“g”,则将显示两个div“Dog”和“Doodle Bird”。 如果用户删除了他们在文本框中输入的所有内容,则会显示所有的anitems。
如果可能,我该如何做到这一点?我想我可能不得不使用.live(),但我真的不确定。
答案 0 :(得分:9)
您必须处理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();
});
答案 1 :(得分:0)
你想要处理keyup事件,我认为你可以这样做:
$('div').each(function() {
$(this).toggle($(this).children('span.itemname').text() == yourVar);
});
答案 2 :(得分:0)