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

问题描述

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

 < table> 
< tr> 
< td> Apple< / td> 
< td>绿色< / td> 
< / tr> 
< tr> 
< td>葡萄< / td> 
< td>绿色< / td> 
< / tr> 
< tr> 
< td>橙色< / td> 
< td>橙色< / td> 
< / tr> 
< / table> 
  

在这上面我有一个文本框，我想以用户类型搜索表格。因此，例如，如果他们输入 Gre ，表格的Orange行将消失，离开Apple和Grapes。如果他们进行并输入 Green Gr ，苹果行应该消失，只留下葡萄。我希望这是明确的。

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

虽然我知道如何删除jQuery中的表格行，但对于如何基于此选择性地去执行搜索和删除行，我一点儿也不知道。有没有简单的解决方案？或者是一个插件？

如果有人能指出我朝着正确的方向发展，那将是辉煌的。

谢谢。

解决方案

我创建了这些例子。 简单搜索

  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（）; 
}）; 
  

演示：

正则表达式搜索

使用正则表达式的更高级功能将允许您按行中的任何顺序搜索单词。如果您键入苹果绿或绿苹果：

$ b， $ b

  var $ rows = $（'＃table tr'）; 
 $（'＃search'）。keyup（function（）{
 
 var val ='^（？=。* \\''）$ $ .trim（$（this ）.val（））。split（/ \s + /）。join（'\\b）（？=。* \\b'）+'）。* $'，
 reg = RegExp（val，'i'），
 text; 
 
 $ rows.show（）。filter（function（）{$ b $ text = $（this）.text ）.replace（/ \s + / g，''）; 
 return！reg.test（text）; 
}）。hide（）; 
}）; 
  

演示：

去抖

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

$ $ p $ $'code $（'＃search'）。keyup（debounce（function（）{
var）= $ .trim（$（this）.val（））。replace（/ + / g，''）.toLowerCase（）;
// etc ...
}，300） ）;

你可以选择任何debounce实现，例如从Lodash _。debounce ，或者你可以使用非常简单的东西，就像我在下一个演示中使用的那样（从）：和。

I've been Googling and searching Stack Overflow for a while, but I just can't get around this problem.

I have a standard HTML table, containing, say, fruit. Like so:

<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>

Above this I have a text box, which I would like to search the table as a user types. So, if they type Gre for example, the Orange row of the table would disapear, leaving the Apple and Grapes. If they carried on and typed Green Gr the Apple row should disapear, leaving just grapes. I hope this is clear.

And, should the user delete some or all of their query from the text box, I should like all of the rows that now match the query to reappear.

While I know how to remove a table row in jQuery, I have little idea about how to go about doing the search and removing rows selectively based on this. Is there a simple solution to this? Or a plugin?

If anyone could point me in the right direction it would be brilliant.

Thank you.

解决方案

I created these examples.

Simple indexOf search

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

Demo: http://jsfiddle.net/7BUmG/2/

Regular expression search

More advanced functionality using regular expressions will allow you to search words in any order in the row. It will work the same if you type apple green or 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();
});

Demo: http://jsfiddle.net/dfsq/7BUmG/1133/

Debounce

When you implement table filtering with search over multiple rows and columns it is very important that you consider performance and search speed/optimisation. Simply saying you should not run search function on every single keystroke, it's not necessary. To prevent filtering to run too often you should debounce it. Above code example will become:

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

You can pick any debounce implementation, for example from Lodash _.debounce, or you can use something very simple like I use in next demos (debounce from here): http://jsfiddle.net/7BUmG/6230/ and http://jsfiddle.net/7BUmG/6231/.

这篇关于如何在HTML表格上执行实时搜索和过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！