如何在HTML表格上执行实时搜索和过滤

Question

我一直在Google搜索和搜索Stack Overflow已有一段时间，但是我无法解决此问题。

我有一个标准的HTML表，其中包含水果。像这样：

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

在此上方，我有一个文本框，我想在用户输入时搜索表格。因此，Gre例如，如果键入，表的橙色行将消失，剩下苹果和葡萄。如果他们继续打字Green Gr，苹果排应该消失，只剩下葡萄。我希望这很清楚。

而且，如果用户从文本框中删除部分或全部查询，我希望现在重新出现与查询匹配的所有行。

虽然我知道如何在jQuery中删除表格行，但我对如何进行搜索以及根据此选择性地删除行一无所知。有一个简单的解决方案吗？还是插件？

如果有人能指出我正确的方向，那就太好了。

谢谢。

Answer 1

我创建了这些示例。

简单的indexOf搜索

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

正则表达式搜索

使用正则表达式的更高级功能将使您可以按任意顺序搜索行中的单词。它将工作一样，如果你键入apple green或green apple：

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

Debounce

在通过搜索多行和多列来实现表过滤时，考虑性能和搜索速度/优化非常重要。简而言之，您不必在每个按键上都运行搜索功能，这是没有必要的。为了防止过滤运行得太频繁，您应该对它进行反跳处理。上面的代码示例将变为：

$('#search').keyup(debounce(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    // etc...
}, 300));

您可以选择任何反跳实现，例如从Lodash_.debounce中进行选择，也可以使用非常简单的方式