jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Jquery筛选器列表,不区分大小写大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想过滤列表而不区分大小写.我想只匹配不匹配大写或小写的字符.

> XXXXXXX
> yyyyyyy
> XXxxx

如果我在搜索框中输入“X”,它会同时显示1和3.我添加了下面的代码,但它也区分大小写.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function filter(element) {
        var value = $(element).val();
        $("#tHelist > li").each(function() {
            if ($(this).text().search(value) > -1) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    }
</script>
</head>
<body>
<input type="text" onkeyup="filter(this)" />
<ul id="tHelist">
    <li>xxvxvxx</li>
    <li>yyyyyyyyyy</li>
    <li>rrrrrrrrrr</li>
    <li>vvvvvvvvvvv</li>
    <li>xcvcvdfsdf</li>
    <li>hkjhkhjkh</li>
    <li>xzfgfhfgh</li>
</ul>

</body>
</html>

解决方法

您需要使用indexOf
$(this).text().search(value)

应该是

$(this).text().indexOf(value)

为什么要使用属性标记附加事件.这是一种不好的做法,应该避免.

您可以使用jQuery来附加事件.

$('input').keyup(function() {
    filter(this); 
});

function filter(element) {
    var value = $(element).val().toLowerCase();
    $("#tHelist > li").each(function () {
        var $this = $(this),lower = $this.text;
        if (lower.indexOf(value) > -1) {
            $this.show();
        } else {
            $this.hide();
        }
    });
}

Check Fiddle

使用过滤器的功能相同一点

function filter(element) {
    var value = $(element).val().toLowerCase();
    $("#tHelist > li").hide().filter(function() {
        return $(this).text().toLowerCase().indexOf(value) > -1;
    }).show();
}

大佬总结

以上是大佬教程为你收集整理的Jquery筛选器列表,不区分大小写全部内容,希望文章能够帮你解决Jquery筛选器列表,不区分大小写所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。