How to filter in menu by li parent what is inside the ul child of li?

Question

How to filter when typing 'process' it and everything that is inside it?

enter image description here

This my HTML:

input search

this side_bar

   
    
        
            
            lang->line('application_daily_process'); ?>
            
                
            
         
         
            
            ">
                 lang->line('application_freight_to_wire'); ?>

My filter in jquery

$(document).ready(function(){
    $("#mySearch").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myMenu li a").filter(function() {
           $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
       if($("#myMenu li a:visible").length > 0){
            $("#emptyMsg").hide();
       }else{
            $("#emptyMsg").show();
       }
      });
});

I thought about adding the name of the parent $(this).data("search").val() inside a data-search="name of the parent" and trying to filter by it in jQuery But it didn't work. Can someone help me please?

The idea is when typing the name of the father it stays open and lists all the children and hides all the others.

user_463319 · Answer

Consider the following.

$(function() {
  $("#mySearch").on("keyup", function(event) {
    if ($(this).val().length > 0) {
      console.log("Starting Filter");
      var term = $(this).val().toLowerCase();
      console.log("Filter for: " + term);
      $(".treeview-menu > li.semFreteNav").each(function(i, el) {
        if ($(el).text().trim().toLowerCase().indexOf(term) > -1) {
          console.log("Found");
          $(el).show();
        } else {
          $(el).hide();
        }
      });
    } else {
      $(".treeview-menu > li.semFreteNav").show();
    }
  });

  $(".input-group button.btn_clear").click(function() {
    $("#mySearch").val("").trigger("keyup");
  });
});



  
  


  
    
      
      Processos
      
    
    
      
         Fretas
      
      
         Pedidios
      
      
         Módulo
      
      
         Erros
      
      
         Administrar
      
      
         Produtos

You can use Filter, yet it might be better to use Each.

HTML requires that all IDs be unique. Your PHP code would create a large number of IDs that are all the same. This can also cause various issues for JS/jQuery. I switched them to Class.

How to filter in menu by li parent what is inside the ul child of li?

1 Answers