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

Dynamically apply search filter in Jquery on multiple search boxes on the same page

本文关键字：搜索 动态 过滤器 应用 Jquery 一页      更新时间：2023-09-26

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

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

这是小提琴链接：

js小提琴

.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);
        });     
    });
});

给你的输入一个 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>
相关文章：