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

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

我们假设我有一个列表：

 
Coffee
 
Tea
 
Milk
 
Water
 
Juice
  

我想要的是输入（在文本框中）例如：牛奶;水;果汁（中间有分号），它返回三个项目。

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

它可以是filter或其他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); }); }); 

   
 
Coffee
 
Tea
 
Milk
 
Water
 
Juice
  

Answer 2

试试这段代码：

 $('input').on('keyup', function(){ var val = $(this).val().toLowerCase(); $('li').each(function() { var $this = $(this); var text = $this.text().toLowerCase(); if ( val.indexOf(text) > -1 ) { $this.show(); } else { $this.hide(); } }); }); 

演示： http ： //jsbin.com/foqagadewo/edit？html，js，output

Answer 3

您可能需要修改Jquery自动完成function才能为您执行此操作https://jqueryui.com/autocomplete/

您还可以使用“multiple”属性创建HTML select元素，并将输入字符串推入数组，然后选择select> option元素中的项目

Answer 4

你可以使用，这将返回匹配的li。

 var items= textboxValue.split(";") var a= $('ul li').filter(function() { return items.indexOf($(this).text()) > -1 ; }); 

Answer 5

你应该试试这个。 请运行我想要显示的代码段和输入。

 $(document).ready(function() { }); function filterItems(thisobj) { $("ul li").hide(); $("ul li").filter(function(i) { return ($(thisobj).val().split(';').indexOf($(this).text())> -1); }).show(); } 

   
 
Coffee
 
Tea
 
Milk
 
Water
 
Juice
  

Answer 6

请查看文档

 //bind chosen $(".chosen-select").chosen({no_results_text: "Oops, nothing found!"}); $('.chosen-select').on('change', function(evt, params) { alert($(".chosen-select").val()); }); 

      Coffee Tea Milk Water Juice