Question

我有信件清单。当用户在文本框中输入文本时，我想过滤任何包含值。

设计：

搜索列表：

<input type="text" id="txtSearch" />

<ul>
  <li>Coffee1</li>
  <li>Coffee2</li>
  <li>Tea1</li>
  <li>Tea2</li>
  <li>Milk1</li>
  <li>Milk2</li>
</ul>

E.g： 如果用户在文本框中输入的值为k1，则表示我只想获取并过滤Milk1 & Milk2。

怎么做？

请帮我解决。

Answer 1

以下是筛选列表元素的一种方法。每次输入更改时，隐藏所有列表元素，只查找具有键入字符串并显示它们的那些：

$('#txtSearch').on('input', function() {
     var that = this;
     $(this).next('ul').find('li').hide().filter(function() {
         return $(this).text().indexOf( that.value ) > -1;
     })
     .show();
});

$('#txtSearch').on('input', function() {
     var that = this;
     $(this).next('ul').find('li').hide().filter(function() {
         return $(this).text().indexOf( that.value ) > -1;
     })
     .show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtSearch" />

<ul>
  <li>Coffee1</li>
  <li>Coffee2</li>
  <li>Tea1</li>
  <li>Tea2</li>
  <li>Milk1</li>
  <li>Milk2</li>
</ul>

注意即可。使用input事件甚至可以捕获粘贴的输入。

参考：.filter( function )

Answer 2

使用：contains（）选择器，fiddle

相关代码：

$('#txtSearch').keyup(function(){
  $('li').hide();
  $('li:contains('+$(this).val()+')').show();
})

此外，如果您希望它不区分大小写，则可以按照此fiddle进行操作。在这个小提琴中，我们添加一个：Contains（）选择器，如下所示

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

并使用该选择器而不是normal：contains（）选择器。

如何搜索li包含文本值？

2 个答案: