javascript 如何在 Jquery 中创建搜索过滤器文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8777855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create a search filter text box in Jquery?
提问by Rolando
Assuming I have a divstructure with a textbox:
假设我有一个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>
I want to make it so that initially.. say it shows 3 anitems, I want to make it so that if the user has any character typed into the search box, it would only show the divs that match with the entry the user is typing.
我想让它最初......说它显示 3 anitems，我想让它这样，如果用户在搜索框中输入了任何字符，它只会显示与用户正在输入的条目匹配的 div。
Ex. So if the user types "D", it would hide all other divs without "D" in the "item name". If the user types another letter "og", then the only div that would be shown is the div with" item name" of "Dog" If the user hits the delete key to remove the "g", then the two divs "Dog" and "Doodle Bird" would be show. If the user deletes everything they typed in the text box, then all the anitems would show up.
前任。因此，如果用户键入“D”，它将隐藏“项目名称”中没有“D”的所有其他 div。如果用户键入另一个字母“og”，那么将显示的唯一 div 是“项目名称”为“Dog”的 div 如果用户按删除键删除“g”，则两个 div“Dog” ”和“涂鸦鸟”将被展示。如果用户删除他们在文本框中键入的所有内容，则所有 anitem 都会显示出来。
How do I accomplish this if possible? I think I may have to use .live() but I'm really not sure.
如果可能，我该如何实现？我想我可能必须使用 .live() 但我真的不确定。
回答by Shadow Wizard is Ear For You
You will have to handle the keyupevent (which is clicked afterkey is released) then use .filter()to find matching items, showing their parents.
您将必须处理该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();
});
回答by Connell
You want to handle the keyup event and i think you can do this:
您想处理 keyup 事件，我认为您可以这样做：
$('div').each(function() {
$(this).toggle($(this).children('span.itemname').text() == yourVar);
});
回答by FishBasketGordo
If you want to filter as the user types, you should attach an event handler to the textbox's keypress[API Ref]event. Everytime the user presses a key, you can filter[API Ref]the contents of #listofstuffand either show[API Ref]or hide[API Ref]it.
如果要根据用户类型进行过滤，则应将事件处理程序附加到文本框的keypress[API Ref]事件。每次用户按下一个键，您都可以filter[API Ref]的内容#listofstuff以及show[API Ref]或hide[API Ref]它。
