使用 jQuery 不区分大小写搜索表行 [重复]答案

【问题标题】：Searching table rows with jQuery Non-Case sensitive [duplicate]使用 jQuery 不区分大小写搜索表行 [重复]
【发布时间】：2018-07-07 23:55:21
【问题描述】：

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

Searching table rows with 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>

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

【问题讨论】：

有人能把代码放在他们的答案中吗？

标签： javascript php jquery html-table

【解决方案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;
    };
});

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

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

【讨论】：

嗯，似乎不起作用。它将允许我搜索完全小写的内容，如果我将 toLowerCase 更改为 toUpperCase 允许我搜索完全大写的内容，但不能仅使用大写或小写搜索同时具有大写和小写的内容。
你应该检查你是否真的覆盖了 jQuery 的 contains 方法。尝试在 .contains 方法覆盖中添加一个警报来检查，如果不是，那么你可能是在声明错误。另外，请记住，您必须在调用之前覆盖该方法，否则您将不会调用被覆盖的方法。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以在这里找到解决方案：Link，这将覆盖原来的 ":contains" 选择器

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

【讨论】：