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

小编典典

我创建了这些示例。

简单的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中进行选择，也可以使用非常简单的方式

2020-05-01