如何在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是"项目名称"为"狗"的div如果用户点击删除键删除"g",那么两个div"Dog"将展示"和涂鸦鸟".如果用户删除了他们在文本框中键入的所有内容,则会显示所有的anitems.

如果可能,我该如何做到这一点？我想我可能不得不使用.live(),但我真的不确定.

Answer 1

您必须处理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();
});

现场测试案例.