如何对HTML表执行实时搜索和过滤
我搜索和搜索Stack Overflow已经有一段时间了，但我就是绕不开这个问题。
我有一个标准的HTML表，比如包含水果。如下所示：
Apple
Green
Grapes
Green
Orange
Orange在这上面我有一个文本框，我想在用户键入时搜索表。所以，如果他们输入Gre例如，表中的Orange行将消失，只剩下Apple和Grapes。如果他们继续打字Green Gr苹果之争应该会消失，只剩下葡萄。我希望这是清楚的。
而且，如果用户从文本框中删除部分或全部查询，我希望现在与查询匹配的所有行都重新出现。
虽然我知道如何在jQuery中删除表行，但我对如何执行搜索并基于此选择性地删除行知之甚少。有没有简单的解决方案？或者是一个插件？
如果有人能给我指出正确的方向，那就太好了。
谢谢你。
回答 9
Stack Overflow用户
发布于 2012-02-03 19:23:00
我创建了这些示例。
简单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，或者您可以使用一些非常简单的东西，就像我在下一个演示中使用的一样(从here)：http://jsfiddle.net/7BUmG/6230/和http://jsfiddle.net/7BUmG/6231/..。
Stack Overflow用户
发布于 2012-02-03 19:53:27
为此，我有一个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
});Stack Overflow用户
发布于 2016-11-01 19:04:47
下面是在HTML表中搜索的最佳解决方案所有的表，(表中所有td，tr )，纯javascript和as短尽可能：
Apple
Green
Grapes
Green
Orange
Orange
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";
}
}
}https://stackoverflow.com/questions/9127498
复制相似问题