javascript - 根据数组搜索表格单元格文本

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

我认为问题是因为在输入字段中，您在 comma 之后键入了 space，例如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/

简单地进行第二次迭代以在 haystack 中寻找子串

$('[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');
  });

});

UPDATE 正则表达式应该是全局的，并删除所有逗号后的所有空格

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