Jquery筛选器列表,不区分大小写

时间:2013-08-10 10:41:33

标签: jquery

我想过滤列表而不区分大小写。我想只匹配不匹配大写或小写的字符。

  1. XXXXXXX
  2. YYYYYYY
  3. XXXXX
  4. 如果我在搜索框中输入“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>
    

4 个答案:

答案 0 :(得分:17)

您需要使用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

使用filter

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

答案 1 :(得分:5)

只需替换

$(this).text().search(value) > -1

使用:

$(this).text().search(new RegExp(value, "i")) > -1

这应该可以解决问题。这是一个有效的 FIDDLE

答案 2 :(得分:2)

添加 jQuery.expr[":"].contains = function (a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};

答案 3 :(得分:-1)

试试这个:

  function filter(element) {
        var value = $(element).val();
        $("#theList > li").hide();
        $("#theList > li:contains('" + value + "')").show();
    }