我创建了这些例子。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();});
防抖动
当您通过搜索多行和多列实现表过滤时,考虑性能和搜索速度/优化非常重要。简单地说你不应该在每次击键时运行搜索功能,这是没有必要的。为了防止过滤太频繁,你应该去除它。上面的代码示例将变为:$('#search').keyup(debounce(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
// etc...}, 300));