我有一个左侧菜单树,它的节点太多,直到第一级,所以我想使用 java 脚本在树节点中实现搜索。如果有人在搜索框中键入查询,则仅当它们在伸展树(Splay Tree)中包含键入的文本查询时,才会显示根目录和第一级的所有节点。像这样的事情:
树结构:
<input type="text" id="query" name="query">
<ul id="sitemap">
<li><a href="#">Places</a>
<ul>
<li><a href="#">Mercury</a></li>
<li><a href="#">Venus</a></li>
<li><a href="#">Earth</a></li>
</ul>
</li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">News</a></li>
</ul>
</li>
.
.
.
</ul>
对于每个 onchange 事件,我是否必须创建一个新的原始子树并显示它,或者我可以隐藏原始树中不包含搜索文本的节点。有什么想法吗?
最佳答案
得到这个工作:
$(document).ready(function(){
$('input#query').keyup(function(){
var query = $('input#query').val().toLowerCase();
if(query!="")
{
$("#sitemap li ul").show();
var children = $("#sitemap li ul li a");
for(var i=0; i<children.length; i++) {
//alert(children[i].parentNode.innerHTML);
if(children[i].innerHTML.toLowerCase().indexOf(query) == -1){
children[i].parentNode.style.display = "none";
}else{
children[i].parentNode.style.display = "block";
}
}
}else{
$("#sitemap li ul").hide();
var children = $("#sitemap li ul li a");
for(var i=0; i<children.length; i++) {
children[i].parentNode.style.display = "block";
}
}
});
});
关于javascript - 带有简单过滤器的菜单树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18041264/