how to filter a multilevel menu with a search input

Question

The difficulty is that the menu has many levels(like the menu in matrix-admin),and every level is large; how should i filter filter the menu on the basis of the value of the search input.

and the output should be like this:(http://www.jqueryrain.com/?lEMFOjZ1) and my html is like this:

<ul>
<li>xxx</li>
<li>
   <a>xxx</a>
   <ul>
      <li>
           <a>xxx</a>
           <ul>
                <li>
                   <a>xxx</a>
                   <ul></ul>
                </li>
           </ul>
      </li>
      <li>xxxx</li>
   </ul>
</li>

sorry... ,I have appended the thml. – user3796331 Jul 02 '14 at 06:11 — user3796331, Jul 02 '14 at 06:11

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Demo Fiddle

$("li").each(function () {
    if (filter == "") {
        $(this).css("visibility", "visible");
        $(this).fadeIn();
    } else if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).css("visibility", "hidden");
        $(this).fadeOut();
    } else {
        $(this).css("visibility", "visible");
        $(this).fadeIn();
    }
});

Onkeypress event the menu will be filtered.... The parent li will be visible, if you try find the child li...

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 02 '14 at 06:28

Bhavik

4,836
3
30
45

it is simple... how should i deal with if one of the deeped hireachy menu is fillted – user3796331 Jul 02 '14 at 06:44
@user3796331 No one can't explain more clear than this – vimal1083 Jul 02 '14 at 06:52
How to show/hide particular ul/li if used css and active etc. – Pankaj Jul 18 '18 at 17:41

score 1 · Answer 2 · answered Jun 13 '17 at 07:30

1

You don't need jquery for this.

document.querySelector("#filter").addEventListener("keyup", function(e) {
  var filter = this.value;
  var count = 0;
  document.querySelectorAll("li").forEach(function(li) {
    if (filter == "") {
      li.style["display"] = "list-item";
    } else if (!li.textContent.match(filter)) {
      li.style["display"] = "none";
    } else {
      li.style["display"] = "list-item";
    }
  });
});

https://jsfiddle.net/gfe9y5o2/

answered Jun 13 '17 at 07:30

lbenedix

11
1

How to use it on particular div or ul using id? its searching whole li on the page. – Pankaj Jul 18 '18 at 16:49
just add a class to your `
– lbenedix Jul 20 '18 at 11:32

how to filter a multilevel menu with a search input

2 Answers2

Demo Fiddle