admin管理员组文章数量:1434914
Sorry for not entering the code I have worked on. I am explaining my doubt clearly this time. I have a tree made of nested ul and li tags. the tree node names are obtained from database. I need to filter the tree based on the name I enter in a text box. While showing the filtered tree item, if it the filtered item is a parent node, child nodes should also be listed(eventhough they don't match the text entered in texbox.)
I have refered this link:
Filter multiple <ul> lists with jQuery
This link helped me to filter out a tree node by entering its name in textbox. But its childnodes are not visible.Please help me. Please find my code below:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}<html>
<head>
<script src=".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>Sorry for not entering the code I have worked on. I am explaining my doubt clearly this time. I have a tree made of nested ul and li tags. the tree node names are obtained from database. I need to filter the tree based on the name I enter in a text box. While showing the filtered tree item, if it the filtered item is a parent node, child nodes should also be listed(eventhough they don't match the text entered in texbox.)
I have refered this link:
Filter multiple <ul> lists with jQuery
This link helped me to filter out a tree node by entering its name in textbox. But its childnodes are not visible.Please help me. Please find my code below:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}<html>
<head>
<script src="https://ajax.googleapis./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>Thanks in advance.
Share Improve this question edited May 23, 2017 at 12:24 CommunityBot 11 silver badge asked May 23, 2016 at 11:13 AngularDoubtsAngularDoubts 4994 gold badges13 silver badges30 bronze badges 5- That question has some code in it. Nobody likes questions without code. Show us what you've tried so far please – Alon Eitan Commented May 23, 2016 at 11:45
- I don't really get your question, so can you mention a case which it fails? maybe if you input 1 or 2 into the textbox.. – Bla... Commented May 23, 2016 at 12:20
- Also I don't see any click function on the child nodes – Bla... Commented May 23, 2016 at 12:36
- Hi, please check my doubt... I have explained it in more detail now with code.. – AngularDoubts Commented May 24, 2016 at 4:32
- @AngularDoubts Your question helped me a lot. Thanks :) – Madhusudan Commented Feb 14, 2017 at 7:25
3 Answers
Reset to default 4Try something like this:
function func(){
alert("Onclick function parent node...");}
function func1(){
alert("Onclick function child node...");}<html>
<head>
<script src="https://ajax.googleapis./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>UPDATE
updated snippet, where you can change .menu class for whatever you need
You can use following jQuery
$(document).ready(function()
{
$('input[type="text"]').keyup(function()
{
var filter = jQuery(this).val();
jQuery("ul li.layer1").each(function()
{
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0)
{
jQuery(this).hide();
}
else
{
jQuery(this).show();
jQuery(this).children().show();
var found = false;
jQuery(this).find("li.layer2").each(function(i,obj)
{
if ($(obj).text().search(new RegExp(filter, "i")) < 0)
{
$(obj).hide();
jQuery(obj).closest('.layer1').show();
}
else
{
$(obj).show();
found = true;
}
});
if(found==false)
{
jQuery(this).find("li.layer2").show();
}
}
});
});
});
Well I have got a lot of help from so many developers.. Thank you all for the support and useful answers.. Please find the one among them which I felt much easier...
Instead of checking it like this,
jQuery("ul li").each(function () {}
Check it as:
jQuery(".mainlayer>li").each(function () {}
So that child nodes are visible and associated functions shall work...
Once again Thank you all for the useful answers.. Happy coding!
本文标签： javascriptFiltering a tree view made of nested ltulgt ltligt along with child nodesStack Overflow
版权声明：本文标题：javascript - Filtering a tree view made of nested <ul> <li> along with child nodes - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745614885a2666337.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论