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

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

希望它有所帮助.. !!