带有分隔符的 JQuery 实时搜索栏

Question

我的页面上有一个搜索栏，它使用 JQuery 来过滤我的网格视图。我不知道如何让它过滤多个值;使用分隔符确定不同的值。

因此，如果我输入搜索栏：狗，蓝色它会将逗号识别为分隔符，并首先过滤表格并隐藏不包含 Dog 的任何行，然后隐藏不包含 Blue 的任何行。

这是我的代码，我现在只能输入一个单词。

       //Filter Grid logic
       $("tbody").attr('class', 'searchable');
       $('input.filter').on('keyup', function () {
           var rex = new RegExp($(this).val(), 'i');
           $('.searchable tr').hide();
           $('.searchable tr').filter(function () {
               return rex.test($(this).text());
           }).show();
           //Always show the Header row
           $('tr.GridViewHeader').show();
       });
   });

感谢您的任何帮助！

Answer 1

这是一个听起来很复杂的策略，但在我上次检查时对我有用： http://jsfiddle.net/teddyrised/mWK2F/

1. 通过删除所有尾随/前导空格^s*|s*$，然后沿,拆分它，同时做出让步，在逗号之前/之后可能存在空格(因此使用 s*,s*<input>
2. 通过将数组与 | 连接来构造 'RegExp' 对象， 是正则表达式中的 OR 运算符。

这是您修改后的脚本

//Filter Grid logic
$("tbody").attr('class', 'searchable');
$('input.filter').on('keyup', function () {
    // Construct array of search text
    var searchtext = $(this).val().replace(/^s*|s*$/g,'').split(/s*,s*/),
        // Construct new RegExp object
        rex = new RegExp(searchtext.join('|'),'i');
    $('.searchable tr').hide();
    $('.searchable tr').filter(function () {
        return rex.test($(this).text());
    }).show();
    //Always show the Header row
    $('tr.GridViewHeader').show();
});

但是，如果要匹配完整的单词，则需要使用单词边界，b 。请记住转义反斜杠，因此我们改用\b。代码在这里看到类似的答案后受到了启发：javascript 匹配数组

rex = new RegExp('\b'+searchtext.join('\b|\b')+'\b','i');

Answer 2

稍微编辑了上面的答案以使其执行"AND"这是解决方案：

   $(document).ready(function () {
       //Filter Grid logic
       $("tbody").attr('class', 'searchable');
       $('input.filter').on('keyup', function () {
           // Construct array of search text
           var searchtext = $(this).val().split(' ');
           // Construct new RegExp object
           var rex = new RegExp('(?=.*' + searchtext.join(')(?=.*') + ').*', 'ig');
           $('.searchable tr').hide();
           $('.searchable tr').filter(function () {
               return $(this).text().replace(/(rn|n|r)/gm, " ").match(rex)
           }).show();
           //Always show the Header row
           $('tr.GridViewHeader').show();
       });

}(;