如何使用 jquery 过滤并搜索大小写？

Question

我有一个使用 2 个输入过滤搜索结果的代码。我正在为此使用 jquery。

<script>
$(document).ready(function () {
    $(".search").keyup(function () {

        $(".searchli").hide();

        if ($("#refine").val() != "") {
            var term = $("#search").val() + " " + $("#refine").val();
        } else {
            var term = $("#search").val();
        }

        $("li:contains('" + term + "')").show();
    });
});    
</script>

Search: <input type="search" id="search" class="search" length="24" />
Refine    <input type="search" id="refine" class="search" length="24" />

我的结果列表包含大写和小写。 我的问题是我不能小写搜索（输入小写的关键字）然后找不到任何结果。

如何将toLowerCase() 或toUpperCase() 添加到我的代码中才能正常工作？

Answer 1

您可以使用this page 上的这个 sn-p 覆盖 jQuery 包含选择器以忽略大小写：

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

或者，您可以创建一个新的选择器，而不是通过调用 :containsInvariant 或其他名称来覆盖 :contains（理论上这可能会在其他脚本中导致奇怪的行为）。

编辑：这与所有版本的 jQuery 不兼容，所以 here's one 应该适用于所有版本：

// An implementation of a case-insensitive contains pseudo
// made for all versions of jQuery
(function( $ ) {

function icontains( elem, text ) {
    return (
        elem.textContent ||
        elem.innerText ||
        $( elem ).text() ||
        ""
    ).toLowerCase().indexOf( (text || "").toLowerCase() ) > -1;
}

$.expr[':'].icontains = $.expr.createPseudo ?
    $.expr.createPseudo(function( text ) {
        return function( elem ) {
            return icontains( elem, text );
        };
    }) :
    function( elem, i, match ) {
        return icontains( elem, match[3] );
    };

})( jQuery );

Answer 2

使用 this 修补 Contains 函数以区分大小写...

编辑 - 这是代码

// NEW selector
jQuery.expr[':'].Contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
        .indexOf(m[3].toUpperCase()) >= 0;
};

// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
        .indexOf(m[3].toUpperCase()) >= 0;
};

JQuery 1.8 版本

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