我想使用jQuery对表行进行实时搜索,“live”字是关键,因为我想在同一个站点的文本输入中键入关键字,我希望jQuery自动对表行进行排序(或删除那些与搜索查询不匹配的行)
这是我的HTML:
<;表>;
<;tr>&书信电报;th>;唯一ID</th>&书信电报;th>;随机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>;
</表>;
如果我愿意的话。通过唯一ID搜索,它应该只显示从唯一ID.Fe的特定编号开始的行。如果在搜索输入框中键入“2”,则以下行应保留,因为它们以2开头:
<;表>;
<;tr>&书信电报;th>;唯一ID</th>&书信电报;th>;随机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>;
</表>;
如果我要键入24,那么从24开始,应该只有一行可见:
<;表>;
<;tr>&书信电报;th>;唯一ID</th>&书信电报;th>;随机ID</th></tr>;
<;tr>&书信电报;td>;24111</td>&书信电报;td>;54364</td></tr>;
</表>;
如果你们能给我一些关于如何做这样的事情的建议,我将非常感激
多谢各位
我不确定这是否有效,但这是有效的:
$(“搜索”)上的(“键控”,函数(){
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();
}
}
});
});
演示-应用一些简单的突出显示