我搜索和搜索Stack Overflow已经有一段时间了,但我就是绕不开这个问题。
我有一个标准的HTML表,比如包含水果。如下所示:
Apple
Green
Grapes
Green
Orange
Orange
在这上面我有一个文本框,我想在用户键入时搜索表。所以,如果他们输入Gre
例如,表中的Orange行将消失,只剩下Apple和Grapes。如果他们继续打字Green Gr
苹果之争应该会消失,只剩下葡萄。我希望这是清楚的。
而且,如果用户从文本框中删除部分或全部查询,我希望现在与查询匹配的所有行都重新出现。
虽然我知道如何在jQuery中删除表行,但我对如何执行搜索并基于此选择性地删除行知之甚少。有没有简单的解决方案?或者是一个插件?
如果有人能给我指出正确的方向,那就太好了。
谢谢你。
发布于 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/..。
发布于 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
});
发布于 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
复制相似问题