Jquery: how hide/show tree elements based on search criteria?

Question

Hello, I have a tree view based on < ul > and < li > tags.

I am trying to hide the branches based on filter text. Here is my show/hide code:

$("#filter").change(function(){
       var tval=$(this).val();
       $("li").show();
       $("li").not(":contains(\'"+tval+"\')").hide();
       $("li").is(":contains(\'"+tval+"\')").show();

       })

The command: $("li").is(":contains(\'"+tval+"\')").show(); shows branches filtered by given tval, but if given < li > has a further children I would like to show them as well. How can I show all child elements if they exist?

kind regards Arman.

EDIT

example: search text A and we have D=>A=>C, D=>C=>C, A=>K=>S, so after filtering my tree should be: D=>A=>C, A=>K=>S. In the current implementation it will look like D=>A, A

Answer 1

You can simplify your approach a bit like this:

$("#filter").change(function(){
   var tval=$(this).val();
   $("li").hide().filter(":contains('"+tval+"')").find('li').andSelf().show();
});

This hides all <li> elements, then shows if they directly contain the value (or are a parent that contains it)...and for those also shows all descendant <li> elements, showing all children hopefully like you want.

Answer 2

If I understand correctly the child selector is what you want.

Answer 3

Try this

$("#filter").change(function(){
       var tval=$(this).val();
       $("li").hide();
       if(tval != ""){             
         $("li").each(function() { 
           if($(this).is(":contains(\'"+tval+"\')")){ 
             $(this).show().find('li').show();
           }
         });
       }
       else {
         $("li").show();
       }
})

So hide all of them, then look for matches and then for each matched li show it and all child li

EDIT: Edited again, sorry I totally missed it last time