javascript - 如何按多个项目搜索/过滤列表？

Question

我正在寻找一个示例，或者可能是一个小提示，用于通过在文本框中键入多个项目来过滤/搜索项目列表的方法。

假设我有一个列表:

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul> 

我想要的是输入(在文本框中)例如:牛奶；水；果汁(中间有分号)，返回三个项目。

$('li').filter(function() {
     ????
})

它可以是一个过滤器或另一个 jquery/js 函数。

提前感谢您的帮助

编辑:

我忘了告诉它应该按最后一项的一部分进行搜索。例如 Coffe;Te --> 返回 Coffe 和 Tea

Answer 1

这是实现此目的的一种方法:-

$('input').keyup(function(){
   var search = this.value.split(';');
   $('ul li').each(function(index, element){
      $(element).toggle(search.indexOf($(element).text()) >= 0);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul>

拆分 ; 上的搜索输入并检查每个 li 的文本以查看它是否在数组中。

更新

忽略大小写和部分匹配

$('input').keyup(function() {
  var search = this.value.split(';');
  $('div label').each(function(index, element) {
    var text = $(element).text().toLowerCase();
    var show = search.filter(function(e) {
      return e != '' && text.indexOf(e.toLowerCase()) >= 0;
    }).length > 0;
    $(element).toggle(show);
  });
});

div label {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<div>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Coffee" />Coffee</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Tea" />Tea</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Milk" />Milk</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Water" />Water</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Juice" />Juice</label>
</div>