javascript - Filtering a tree view made of nested <ul> <li> along with child nodes

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>

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 AngularDoubts 4994 gold badges13 silver badges30 bronze badges

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

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

Try 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!

Programmer puzzle solving

javascript - Filtering a tree view made of nested <ul> <li> along with child nodes - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)