用jQuery搜索表行，不区分大小写

Searching table rows with jQuery Non-Case sensitive

本文关键字：不区 大小写 jQuery 搜索表      更新时间：2023-09-26

我正在尝试这个漂亮的小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>

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

您可以使用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;
    };
});

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

你最好这样写你自己的选择器表达式:

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

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

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