Question

我有一张桌子，里面有一堆数据。当前，我的代码将文本字段输入与表中的数据进行比较。如果有匹配项，它将显示该特定表行。这是我的代码：

  $(document).on('keyup','#filterText',function(){

    $('.all').hide();  // hide everything
    $('tfoot').hide(); // hide everything

    var s = $(this).val().toLowerCase(); //get input string

    if(s==''){$('.all').show(); $('tfoot').show();}; // if no input then show everything


    $('#report tbody tr td').each(function(i,td) {

      //go through each table cell and compare
      if($(td).text().toLowerCase().indexOf(s)!==-1){
       $(td).closest('tr').show(); // show table row
      }             

    });

  }); //.but_filterText

这很好。但是现在，我需要修改它，以便用户可以同时进行多个搜索，并以逗号分隔。所以这就是我所做的，什么都没发生：

$(document).on('keyup','#filterText',function(){
  $('.all').hide();  
  $('tfoot').hide();

  var s = $(this).val().toLowerCase().split(',');

  if(s === undefined || s.length == 0){
    $('.all').show(); $('tfoot').show();
  };

  $('#report tbody tr td').each(function(i,td) {
    if(s.indexOf($(td).text().toLowerCase())!==-1){
        $(td).closest('tr').show();
    }
  });

}); //.but_filterText

似乎应该可以，但无法继续进行。我究竟做错了什么。谢谢

Answer 1

我认为问题是因为在输入字段中，您在space之后键入comma，例如text 1, text 2代替text 1,text 2

我做了一个小的（类似于您的代码）示例：（在此示例中，您可以输入space，也可以不输入，因为它将被替换）

$('[name="search"]').on('keyup', function() {

  var $tds = $('td');

  var s = this.value.toLowerCase().replace(/\,\s/,',').split(','); 
  // consider replacing comma+space (/\,\s/) with just a comma

  // and also i would recommend using filter function for finding matches,
  // it will return an array of matched elements, empty if there is no match
  $tds = $tds.filter(function(i, td) {
    return s.indexOf($(td).text().toLowerCase()) >=0;
  });

  $tds.addClass('selected');
});

这是jsfillde-http://jsfiddle.net/zqdbso1w/1/

更新（根据您的评论）

这是jsfillde-http://jsfiddle.net/zqdbso1w/3/

只需进行第二次迭代即可在干草堆中寻找子字符串

$('[name="search"]').on('keyup', function() {
    var $tds = $('td');
    var s = this.value.toLowerCase().replace(/\,\s/,',').split(',');
  $tds.removeClass('selected');
  $tds.each(function() {
    var text = $(this).text().toLowerCase();
        var r = s.filter( function(t) {
        if (!t.length) return false;
            return text.indexOf(t) >= 0;
        });

    if (r.length) $(this).addClass('selected');
  });

});

更新正则表达式应为全局正则表达式，并在所有逗号后删除所有空格

这是jsfiddle-http://jsfiddle.net/zqdbso1w/4/

针对数组搜索表格单元格文本

1 个答案: