我正在寻找一个示例，或者可能是一个关于通过在文本框中输入的多个项目来过滤/搜索项目列表的方法的一点提示。
假设我有一个列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
</ul>
我想要的是输入（在文本框中）例如：牛奶；水；果汁
（中间有分号），返回三个项目。
$('li').filter(function() {
????
})
它可以是一个过滤器或另一个 jquery/js 函数。
预先感谢您的任何帮助
EDIT :
我忘记告诉它应该按最后一项的一部分进行搜索。例如 Coffe;Te --> 返回 Coffe 和 Tea
这是实现这一目标的一种方法：-
$('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 的文本以查看它是否在数组中。
Update
忽略大小写和部分匹配
$('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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
