HTML表格多列过滤

Question

我正在开发一个多列多词过滤搜索，遇到两个问题：

1. 我只能部分过滤第一列；部分，因为输入 apple 它会在第一列显示苹果和橙子。
2. 我正在努力寻找一种方法，使其在两列上都进行多词搜索。

我找到了a table filtering techniques on SO 和 adjusted them in this fiddle。但是这段代码只会用一个词过滤所有列。输入多个单词以缩小结果范围（查找A and B）不起作用。

下面的代码是我尝试在单个框中执行多列多词搜索see my fiddle。

如何实现对组合搜索词组的多列的过滤？

意思是只显示存在searchphrase-1 and searchphrase-2 的行。

JS

var $orig_rows1 = $('#table tbody tr td[class = "col1"]');
var $orig_rows2 = $('#table tbody tr td[class = "col2"]');
$('#search').keyup(function() {
   var $rows1 = $orig_rows1;
   var $rows2 = $orig_rows2;
   var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    $("tr:hidden").show();
    $rows1.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).parent("tr").hide();
});

HTML

<input type="text" id="search" placeholder="Type to search title 1">    
<table class="table-striped" id="table">
     <thead>
     <th>Title 1</th>
     <th>Title 2</th>
    </thead>
    <tbody>    
   <tr>
      <td class="col1">Apple</td>
      <td class="col2">Green</td>
   </tr>
   <tr>
      <td class="col1">Grapes</td>
      <td class="col2">Green</td>
   </tr>
   </tbody>    
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

任何建议都会很棒。

Answer 1

你的代码错误</tbody>放错了，一定是

<tbody>    
   <tr>
      <td class="col1">Apple</td>
      <td class="col2">Green</td>
   </tr>
   <tr>
      <td class="col1">Grapes</td>
      <td class="col2">Green</td>
   </tr>    
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</tbody>

---

不是一个完美的解决方案，我们将不胜感激提出建议

试试这个Demo Fiddle它有使用Tag-it! plugin制作的多词搜索功能。

---

更新同时搜索 AND 和 OR

Demo Fiddle with a check box to perform both operations

编辑：添加了一些链接的小提琴

这是来自链接小提琴的部分代码

var search = function () {
    if ($('.tagit-label').length) {

        $("#table tbody tr").hide();
        var toShow = [];

        $('.tagit-label').each(function () {
            filter = $(this).text();
            $("#table tbody tr").each(function () {
                if ($(this).text().search(new RegExp(filter, "i")) > 0) {
                    toShow.push($("#table tbody tr").index(this));
                }
            });
        });

        if ($('#chkBoth').prop("checked") && $('.tagit-label').length > 1) {
            var filterShow = [];
            var outputArray = [];
            $(toShow).each(function (i, value) {
                if (($.inArray(value, outputArray)) == -1) {
                    outputArray.push(value);
                }
            });
            $(outputArray).each(function (i, value) {
                var index = toShow.indexOf(value);
                toShow.splice(index, 1);
            });
        }

        $(toShow).each(function (i, value) {
            $("#table tbody tr").eq(value).fadeIn();
        });

    } else {
        $("#table tbody tr").fadeIn();
    }
}

这是我在下面链接小提琴的结果：

希望对您有所帮助..!!