很抱歉没有输入我所处理的代码。这次我把我的疑惑解释清楚了。我有一棵由嵌套 ul 和 li 标签组成的树。树节点名称是从数据库中获取的。我需要根据在文本框中输入的名称来过滤树。在显示过滤的树项目时，如果过滤的项目是父节点，则还应该列出子节点(即使它们与 texbox 中输入的文本不匹配。)
我引用了此链接:
Filter multiple <ul> lists with jQuery
此链接帮助我通过在文本框中输入树节点的名称来过滤树节点。 但它的子节点不可见。请帮助我。请在下面找到我的代码:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type="text"]').keyup(function(){
var filter = jQuery(this).val();
jQuery("ul li").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show();
jQuery(this).children().show();
}
});
});
});
</script>
</head>
<body>
<input type="text" />
<ul class="mainlayer" id="category1">
<li class="layer1"><a href="#" onclick="func();">item1</a>
<ul>
<li class="layer2"><a href="#" onclick="func1();">hju11</a></li>
<li class="layer2"><a>kiu12</a></li>
</ul>
</li>
<li class="layer1"><a>item2</a></li>
<li class="layer1"><a> item3</a></li>
</ul>
</body>
</html>提前致谢。
最佳答案
尝试这样的事情:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
.hide{
display:none;
}
</style>
<script>
$(document).ready(function() {
$('input[type="text"]').keyup(function(){
var filter = jQuery(this).val();
jQuery(".menu ul > li").removeClass("hide");
jQuery(".menu ul > li").removeClass("show");
jQuery(".menu ul > li").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0 && !jQuery(this).hasClass('show')) {
jQuery(this).addClass('hide');
} else {
jQuery(this).addClass('show');
jQuery(this).find(' ul > li').addClass('show');
}
});
});
});
</script>
</head>
<body>
<input type="text" />
<div class="menu">
<ul class="mainlayer" id="category1">
<li class="layer1"><a href="#" onclick="func();">item1</a>
<ul>
<li class="layer2"><a href="#" onclick="func1();">hju11</a></li>
<li class="layer2"><a>kiu12</a></li>
</ul>
</li>
<li class="layer1"><a>item2</a></li>
<li class="layer1"><a> item3</a></li>
</ul>
</div>
</body>
</html>更新
更新了代码片段，您可以根据需要更改 .menu 类
关于javascript - 过滤由嵌套 <ul> <li> 以及子节点组成的 TreeView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37389492/