Question

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

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

这是小提琴链接：

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>

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

1 个答案: