0

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

因此，如果我在搜索栏中输入：Dog, Blue 它会将逗号识别为分隔符并首先过滤表并隐藏任何不包含 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();
       });
   });

谢谢你的帮助！

4

2 回答 2

0

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

   $(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(/(\r\n|\n|\r)/gm, " ").match(rex)
           }).show();

           //Always show the Header row
           $('tr.GridViewHeader').show();
       });

});

于 2014-04-28T15:51:02.227 回答
0

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

  1. <input>通过删除所有尾随/前导空格来解析值^\s*|\s*$，然后将其拆分，,同时做出让步，即在逗号之前/之后可能存在空格（因此使用\s*,\s*
  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 match against array

rex = new RegExp('\\b'+searchtext.join('\\b|\\b')+'\\b','i');
于 2014-04-25T20:10:56.510 回答