我想通过表行进行实时搜索，使用jQuery，“活”字是关键，因为我想在文本输入中键入关键字，在同一个网站上，我希望jQuery自动排序(或删除那些与搜索查询不符的列表)行。
这是我的HTML：
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>214215</td><td>442</td></tr>
<tr><td>1252512</td><td>556</td></tr>
<tr><td>2114</td><td>4666</td></tr>
<tr><td>3245466</td><td>334</td></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
如果我会fe按唯一ID搜索，它应该显示唯一的行从唯一ID的特定数字开始。铁。如果我在搜索输入框中输入’2’，则应该保留以下行，因为它们以2：
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>214215</td><td>442</td></tr>
<tr><td>2114</td><td>4666</td></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
如果我输入24，那么应该只有一行可见，从24开始：
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
如果你们可以给我一些关于如何做这样的事情的技巧，我将非常感激。
谢谢。
解决方法
我不知道这是多么有效，但这是有效的：
$("#search").on("keyup",function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index != 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) != 0) {
$(this).hide();
}
else {
$(this).show();
}
}
});
});
我添加了一些简单的突出显示逻辑，您或将来的用户可能会找到方便。
添加一些基本突出显示的方法之一是在匹配的文本周围包装em标签，并使用CSS将黄色背景应用于匹配的文本，即：(em {background-color：yellow})，类似于：
// removes highlighting by replacing each em tag within the specified elements with it's content
function removeHighlighting(highlightedElements){
highlightedElements.each(function(){
var element = $(this);
element.replaceWith(element.html());
})
}
// add highlighting by wrapping the matched text into an em tag,replacing the current elements,html value with it
function addHighlighting(element,textToHighlight){
var text = element.text();
var highlightedText = '<em>' + textToHighlight + '</em>';
var newText = text.replace(textToHighlight,highlightedText);
element.html(newText);
}
$("#search").on("keyup",function() {
var value = $(this).val();
// remove all highlighted text passing all em tags
removeHighlighting($("table tr em"));
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var $tdElement = $row.find("td:first");
var id = $tdElement.text();
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
//highlight matching text,passing element and matched text
addHighlighting($tdElement,value);
$row.show();
}
}
});
});
Demo – 应用一些简单的亮点
