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

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/