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

2018-06-26 19:21:37

我一直在谷歌搜索和搜索堆栈溢出了一段时间，但我无法解决这个问题。

我有一个标准的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中的表格行，但我不知道如何根据这个选择去执行搜索和删除行。有没有简单的解决方案？或者一个插件？

如果任何人都能指引我走向正确的方向，那将是辉煌的。

谢谢。

我创建了这些例子。

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

演示：http://jsfiddle.net/7BUmG/2/

正则表达式搜索

使用正则表达式的更高级功能将允许您按行中的任何顺序搜索单词。如果你输入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();
});

演示：http://jsfiddle.net/dfsq/7BUmG/1133/

防抖动

当您通过多行和多列搜索实现表格过滤时，考虑性能和搜索速度/优化是非常重要的。简单地说，你不应该在每一次击键时运行搜索功能，这是没有必要的。为了防止过滤运行过于频繁，您应该删除它。以上代码示例将变为：

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

你可以选择任何debounce实现，例如来自Lodash _.debounce，或者你可以使用一些非常简单的东西，就像我在下一个演示中使用的东西（从这里反弹）：http://jsfiddle.net/7BUmG/6230/和http：/ / /jsfiddle.net/7BUmG/6231/。

我有一个jQuery插件。它也使用jquery-ui。你可以在这里看到一个例子http://jsfiddle.net/tugrulorhan/fd8KB/1/

$("#searchContainer").gridSearch({
            primaryAction: "search",
            scrollDuration: 0,
            searchBarAtBottom: false,
            customScrollHeight: -35,
            visible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            textVisible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            minCount: 2
        });

这里是在HTML表格中搜索最好的解决方案，同时覆盖所有表格 （ 表格中的所有td，tr）， 纯javascript和尽可能短的代码：

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id='myTable'>
   <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>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

链接地址: http://www.djcxy.com/p/74969.html

上一篇: How to perform a real time search and filter on a HTML table

下一篇: How to shorten my conditional statements