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

Question

我一直在谷歌搜索并搜索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例如,表中的橙色行将消失,留下Apple和Grapes.如果他们继续并打字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();
});

演示: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));

你可以选择任何去抖动实现,例如从Lodash _.debounce,或者你可以使用非常简单的东西,就像我在下一个演示中使用的那样(从这里去抖动):http://jsfiddle.net/7BUmG/6230/和http:/ /jsfiddle.net/7BUmG/6231/.

Answer 2

我有一个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
        });

Answer 3

这是在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>

Answer 4

纯 JavaScript 解决方案：

适用于所有列且不区分大小写：

function search_table(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search_field_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}