Question

我的页面上有一个搜索栏，它使用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();
       });
   });

感谢您的帮助！

Answer 1

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

通过删除所有尾随/前导空格<input>来解析^\s*|\s*$中的值，然后沿着,拆分它，同时在逗号之前/之后做出可能存在空格的让步（因此使用\s*,\s*
通过将数组与|连接来构造“RegExp”对象，//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(); });是正则表达式中的 OR 运算符。

这是您修改过的脚本

\b

但是，如果您要匹配完整字词，则需要使用字边界\\b。请记住逃避反斜杠，因此我们使用rex = new RegExp('\\b'+searchtext.join('\\b|\\b')+'\\b','i');代替。在此处看到类似的答案后，代码就受到了启发：javascript match against array

{{1}}

Answer 2

编辑上面的答案，让它做'和'这里是解决方案：

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

}）;

带分隔符的JQuery Live Search栏

2 个答案: