通过表行进行实时搜索

我想使用jQuery对表行进行实时搜索,“live”字是关键,因为我想在同一个站点的文本输入中键入关键字,我希望jQuery自动对表行进行排序(或删除那些与搜索查询不匹配的行)

这是我的HTML:

<表>
<tr&gt&书信电报;th>唯一ID&lt/th&gt&书信电报;th>随机ID&lt/th&gt&lt/tr>
<tr&gt&书信电报;td>214215&lt/td&gt&书信电报;td>442&lt/td&gt&lt/tr>
<tr&gt&书信电报;td>1252512&lt/td&gt&书信电报;td>556&lt/td&gt&lt/tr>
<tr&gt&书信电报;td>2114&lt/td&gt&书信电报;td>4666&lt/td&gt&lt/tr>
<tr&gt&书信电报;td>3245466&lt/td&gt&书信电报;td>334&lt/td&gt&lt/tr>
<tr&gt&书信电报;td>24111&lt/td&gt&书信电报;td>54364&lt/td&gt&lt/tr>
&lt/表>

如果我愿意的话。通过唯一ID搜索,它应该只显示从唯一ID.Fe的特定编号开始的行。如果在搜索输入框中键入“2”,则以下行应保留,因为它们以2开头:

<表>
<tr&gt&书信电报;th>唯一ID&lt/th&gt&书信电报;th>随机ID&lt/th&gt&lt/tr>
<tr&gt&书信电报;td>214215&lt/td&gt&书信电报;td>442&lt/td&gt&lt/tr>
<tr&gt&书信电报;td>2114&lt/td&gt&书信电报;td>4666&lt/td&gt&lt/tr>
<tr&gt&书信电报;td>24111&lt/td&gt&书信电报;td>54364&lt/td&gt&lt/tr>
&lt/表>

如果我要键入24,那么从24开始,应该只有一行可见:

<表>
<tr&gt&书信电报;th>唯一ID&lt/th&gt&书信电报;th>随机ID&lt/th&gt&lt/tr>
<tr&gt&书信电报;td>24111&lt/td&gt&书信电报;td>54364&lt/td&gt&lt/tr>
&lt/表>

如果你们能给我一些关于如何做这样的事情的建议,我将非常感激

多谢各位

我不确定这是否有效,但这是有效的:

$(“搜索”)上的(“键控”,函数(){
var值=$(this.val();
$(“table tr”)。每个(函数(索引){
如果(索引!=0){
$row=$(此项);
var id=$row.find("td:first").text();
如果(id.indexOf(值)!=0){
$(this.hide();
}
否则{
$(this.show();
}
}
});
});​

演示-桌面上的实时搜索


我添加了一些简单的突出显示逻辑,您或未来的用户可能会觉得很方便

添加一些基本突出显示的方法之一是围绕匹配文本包装em标记,并使用CSS将黄色背景应用于匹配文本,即:(em{background color:yellow}),类似于此:

//通过将指定元素中的每个em标记替换为其内容来删除突出显示
功能移除高亮显示(高亮显示元素){
highlightedElements.each(function()){
var元素=$(此);
element.replaceWith(element.html());
})
}
//通过将匹配的文本包装到em标记中,用它替换当前元素、html值来添加高亮显示
函数addHighlighting(元素,textToHighlight){
var text=element.text();
var highlightedText='<em>'+textToHighlight+'</em>';
var newText=text.replace(textToHighlight,highlightedText);
html(newText);
}
$(“搜索”)。在(“键控”,函数()上{
var值=$(this.val();
//删除通过所有em标记的所有高亮显示的文本
删除突出显示($(“table tr em”);
$(“table tr”)。每个(函数(索引){
如果(索引!==0){
$row=$(此项);
var$tdElement=$row.find("td:first");
var id=$tdElement.text();
var matchedIndex=id.indexOf(值);
如果(匹配索引!=0){
$row.hide();
}
否则{
//突出显示匹配文本、传递元素和匹配文本
addHighlighting($tdElement,value);
$row.show();
}
}
});
});

演示-应用一些简单的突出显示


发表评论