javascript - 在同一页面上的多个搜索框上动态应用 Jquery 中的搜索过滤器

Question

我在同一页面上有多个搜索输入框，其中包含我想要搜索的不同列表。

我的问题是，当我在一个搜索框中搜索时，它适用于所有其他搜索框，并且也会搜索所有其他搜索框。我希望它特定于用户搜索的字段

这是 fiddle 链接:

jsFiddle

HTML

<ul id="category1">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
<ul>
    <li>item27</li>
    <li>item28</li>
</ul>

JS

$(function(){

    $('input[type="text"]').keyup(function(){

        var searchText = $(this).val();

        $('ul > li').each(function(){

            var currentLiText = $(this).text(),
                showCurrentLi = currentLiText.indexOf(searchText) !== -1;

            $(this).toggle(showCurrentLi);

        });     
    });

});

Answer 1

为您的输入提供一个 ID，并将处理程序附加到它:http://jsfiddle.net/o88bbdkv/1/

$(function(){

  $('#searchInput').keyup(function(){

    var searchText = $(this).val();

    $('ul > li').each(function(){

        var currentLiText = $(this).text(),
            showCurrentLi = currentLiText.indexOf(searchText) !== -1;

        $(this).toggle(showCurrentLi);

    });     
  });

});

<input type="text" id="searchInput" />

<ul id="category1">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<ul>
  <li>item27</li>
  <li>item28</li>
</ul>