javascript - 如何在 Jquery 中创建搜索过滤器文本框？

Question

假设我有一个带有文本框的 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 是“项目名称”为“Dog”的 div如果用户按下删除键删除“g”，则会显示“Dog”和“Doodle Bird”这两个 div。如果用户删除了他们在文本框中输入的所有内容，那么所有的项目都会显示出来。

如果可能，我该如何实现？我想我可能必须使用 .live() 但我真的不确定。

Answer 1

您必须处理 keyup 事件(在 键被释放后单击)然后使用 .filter() 查找匹配项元素，展示他们的 parent 。

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