javascript - 使用 jQuery 不区分大小写搜索表行

Question

我正在尝试这个漂亮的小 jQuery 脚本来搜索这里找到的表：

使用 jQuery 搜索表格行

它工作得很好，但是我不希望它区分大小写，例如，如果我的表中的值是值一，我希望能够搜索值一或值一并且仍然得到正确的结果。

这是控制它的 Jquery：

<script>
$(document).ready(function(){
$('input[name="search"]').keyup(function(){
  var searchterm = $(this).val();
  if(searchterm.length > 3) {
   var match = $('tr.data-row:contains("' + searchterm + '")');
   var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
   match.addClass('selected');
   nomatch.css("display", "none");
  } else {
   $('tr.data-row').css("display", "");
   $('tr.data-row').removeClass('selected');
  }
});
});
</script>

谁能帮我使它不区分大小写？

Answer 1

您可以使用 toLowerCase() 方法将两个字符串都转换为小写。

它应该看起来像这样：

$(document).ready(function(){
$('input[name="search"]').keyup(function(){
  var searchterm = $(this).val();
  searchterm=searchterm.toLowerCase();  
  if(searchterm.length > 3) {
   var match = $('tr.data-row:contains("' + searchterm + '")');
   var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
   match.addClass('selected');
   nomatch.css("display", "none");
  } else {
   $('tr.data-row').css("display", "");
   $('tr.data-row').removeClass('selected');
  }
});
});

你也需要重写 jQuery 方法！看起来像这样的东西...

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

这很简单，你所做的就是在比较它们之前强制两个字符串都是小写的。这样你就可以跳过不同的案例问题。

希望这有帮助，祝你好运。

Answer 2

最好的办法可能是编写自己的选择器表达式，如下所示：

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

Answer 3

您可以在此处找到解决方案：链接，这将覆盖原始的“:contains”选择器

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