如何在Jquery中创建搜索过滤器文本框?

时间:2012-01-08 13:19:32

标签: javascript jquery html

假设我的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(),但我真的不确定。

3 个答案:

答案 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();
});

Live test case

答案 1 :(得分:0)

你想要处理keyup事件,我认为你可以这样做:

$('div').each(function() {
   $(this).toggle($(this).children('span.itemname').text() == yourVar);
});

答案 2 :(得分:0)

如果要按用户类型进行过滤,则应将事件处理程序附加到文本框的keypress [API Ref] 事件。每次用户按下某个键时,您都可以filter [API Ref] #listofstuffshow [API Ref] hide [API Ref]