Question

我试图过滤列表而不用担心单词是否大写。

我有以下HTML：

<ul class="dropdown-menu gatherDropDown" id="list">
   <h3 id="header">Filter by </h3>
   <input id="filter" type="text" name="fname" onkeyup="filterList(this)">
   <li><input type="checkbox" class="item_name"> Producer 1</li>
   <li><input type="checkbox" class="item_name"> Producer 2</li>
   <li><input type="checkbox" class="item_name"> Producer 3</li>
   <li><input type="checkbox" class="item_name"> Producer 4</li>
   <li><input type="checkbox" class="item_name"> Producer 5</li>
   <li><input type="checkbox" class="item_name"> Producer 6</li>
   <li><input type="checkbox" class="item_name"> Producer 7</li>
</ul>

这是我的jQuery：

function filterList(element){
  var value = $(element).val();

  $("#list > li:not(:contains(" + value + "))").hide();
  $("#list > li:contains(" + value + ")").show();
}

我还设置了一个codepen：http://codepen.io/tetonhiker/pen/Nbqrzd

Answer 1

嗯，我已经改变了你的js但是这样的事情怎么样（见底部的解释）：

＆＃13;

$("#filter").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	$("#list > li").each(function() {
		$(this).toggle( $(this).text().toLowerCase().indexOf(value) !== -1 )
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="header">Filter by </h3>
<input id="filter" type="text" name="fname">
<ul class="dropdown-menu gatherDropDown" id="list">
  <li><input type="checkbox" class="item_name">Producer 1</li>
  <li><input type="checkbox" class="item_name">Producer 2</li>
  <li><input type="checkbox" class="item_name">Producer 3</li>
  <li><input type="checkbox" class="item_name">Producer 4</li>
  <li><input type="checkbox" class="item_name">Producer 5</li>
  <li><input type="checkbox" class="item_name">Producer 6</li>
  <li><input type="checkbox" class="item_name">Producer 7</li>
</ul>

＆＃13;

说明：我循环浏览每个列表项，并检查其.text()值是否与input框的值匹配。它不区分大小写的原因是它使一切都变小。

Answer 2

您也可以使用

$.expr[":"].Contains = $.expr.createPseudo(function (arg) {
            return function (elem) {
                return $(elem).text().toLowerCase().indexOf(arg.toLowerCase()) >= 0;
            };
        });
        function filterList(element) {
            var value = $(element).val();
            $("#list > li:not(:Contains(" + value + "))").hide();
            $("#list > li:Contains(" + value + ")").show();
        }

不区分大小写过滤

2 个答案: