jQuery :contains() 选择器大小写问题

Question

我的html是这样的

<input id="txt" value=""></input>

<div class="link-item">jK</div>
<div class="link-item">JFOO</div>

我的 js

$('#txt').keyup(function(){

    var txtsearch = $('#txt').val();
    var filt = $("div.link-item:contains('" + txtsearch +"')");

    $("div.link-item").css("display", "none")
        .filter(filt)
        .css("display", "block");

});

我希望在客户端动态过滤内容。当我输入一个大写的 j 时，它只返回第二个 div，而我想获取所有包含 j 的 div，无论是大写还是小写。

Answer 1

您可以将.contains 过滤器更改为不区分大小写或创建自己的选择器。

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

这会创建一个新的选择器：icontains（或者你可以将它命名为 insensitive-contains，或者任何你喜欢的名字）。 它的用法与 contains 相同：$('div:icontains("Stack")'); 将匹配：

<div>stack</div>
<div>Stack</div>
<div>StAcKOverflow</div>

或者覆盖现有的.contains 过滤器：

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

有了这个，

$("div:contains('John')");

会选择所有这三个元素：

<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>

Answer 2

为什么不使用filter 函数，并传入一个使用不区分大小写的正则表达式的函数？

var filteredDivs = $("div.link-item").filter(function() {
    var reg = new RegExp(txtsearch, "i");
    return reg.test($(this).text());
});

DEMO

Answer 3

这是我的贡献，希望对你有帮助:)

$('#txt').keyup(function() {
    var query = $(this).val();
    $("div.link-item")
        .hide()
        .filter(':contains("' + query + '")')
        .show();
});

:contains() selector 区分大小写。

匹配的文本可以直接出现在所选元素中、该元素的任何后代中，或者它们的组合中。与属性值选择器一样，:contains() 括号内的文本可以写成裸词或用引号括起来。 文本必须有匹配的大小写才能被选中。

如果有人想尝试一下，还创建了demo。

更新

抱歉，一定是误读了您的问题。

在http://bugs.jquery.com/ticket/278 找到这个jQuery 表达式来创建一个新的不区分大小写的选择器，我更新了我的demo。

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array) {
    return (elem.textContent || elem.innerText || '').toLowerCase()
        .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

Answer 4

我不相信有办法使用原始选择器来做到这一点。 contains 选择器区分大小写，似乎没有不区分大小写的版本。我认为最好的方法是使用手动查询对象的过滤器

var filt = function (unused) {
  $(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1;
};