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

【问题标题】：How do I create a search filter text box in Jquery?如何在 Jquery 中创建搜索过滤器文本框？
【发布时间】：2018-07-25 12:19:50
【问题描述】：

假设我有一个带有文本框的 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() 但我真的不确定。

【问题讨论】：

标签： javascript jquery html

【解决方案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();
});

Live test case.

【讨论】：

【解决方案2】：

如果您想在用户输入时进行过滤，您应该将事件处理程序附加到文本框的keypress^{[API Ref]} 事件。每次用户按下一个键，你可以filter^{[API Ref]}#listofstuff和show的内容^{[API Ref]} 或hide^{[API Ref]} 它。

【讨论】：

【解决方案3】：

你想处理 keyup 事件，我认为你可以这样做：

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

【讨论】：