Jquery 不区分大小写的列表过滤

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

我有以下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>

---

我还设置了一个代码笔：

我对你的js做了一些修改，但是类似这样的东西怎么样（请参见底部的解释）：

$（“#过滤器”）。在（“键控”，函数（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#list>li”）。每个（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）！=-1）
});
});

过滤

制作人1
制作人2
制片人3
制片人4
制片人5
制片人6
制片人7
我对你的js做了很多修改，但类似这样的东西怎么样（请参见底部的解释）：


$（“#过滤器”）。在（“键控”，函数（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#list>li”）。每个（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）！=-1）
});
});

过滤

制作人1
制作人2
制片人3
制片人4
制片人5
制片人6
制片人7
您也可以使用此选项

$.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();
        }

你也可以用这个

$.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();
        }

你一开始总是用大写字符？如果是这样的话，也许类似的事情能帮上忙？这是可行的，但一旦我从输入文本区域中删除任何文本，原始列表就不会显示。我怎么能让它再次出现？旁注：你的HTML是无效的。你不应该在
ul
标签下立即添加
input
标签，也不应该在
ul
标签下添加
h3
标签。我知道Mikey——只是为了一个项目，它使用一些旧的引导程序将所有这些都打包到了滑出菜单中。它仍然可以正常工作，但我必须把它全部打包在一起你一开始总是大写字符？如果是这样的话，也许类似的事情能帮上忙？这是可行的，但一旦我从输入文本区域中删除任何文本，原始列表就不会显示。我怎么能让它再次出现？旁注：你的HTML是无效的。你不应该在
ul
标签下立即添加
input
标签，也不应该在
ul
标签下添加
h3
标签。我知道Mikey——只是为了一个项目，它使用一些旧的引导程序将所有这些都打包到了滑出菜单中。它仍然可以正常工作，但我必须将它全部打包在一起，缩短使用时间，而不是
show（）
和
hide（）
@Mikey。。是的，一个解释会有帮助，而不仅仅是说短到什么us@Teton-编码员：没问题。但要注意的是，实际上没有理由使用无效的HTML。我在回答中已经改正了。如果你需要它包装在某物中，考虑使用<代码> div < /代码>。@ Teon编码器，当只有7个选项时，这个解决方案是很好的。如果你开始超过100（甚至更少），你可能会遇到性能问题。你应该考虑使用像React这样的东西。我对React不太熟悉，但是一旦我完成了，我们将从db中提取一个包含数百个项目的列表。因此，使用更短的使用时间，而不是使用
show（）
和
hide（）
@Mikey.，react可以更快地完成此任务。。是的，一个解释会有帮助，而不仅仅是说短到什么us@Teton-编码员：没问题。但要注意的是，实际上没有理由使用无效的HTML。我在回答中已经改正了。如果你需要它包装在某物中，考虑使用<代码> div < /代码>。@ Teon编码器，当只有7个选项时，这个解决方案是很好的。如果你开始超过100（甚至更少），你可能会遇到性能问题。你应该考虑使用像React这样的东西。我对React不太熟悉，但是一旦我完成了，我们将从db中提取一个包含数百个项目的列表。所以用react做这件事会更快吗？