如何使用搜索輸入過濾多級菜單

Question

困難在於菜單具有多個級別（如matrix-admin中的菜單），並且每個級別都很大； 我應該如何過濾基於搜索輸入值的菜單。

和輸出應該是這樣的：( http://www.jqueryrain.com/?lEMFOjZ1 ）和我的html是這樣的：

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

Answer 1

演示小提琴

$("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事件菜單將被過濾掉....父li將是可見的，如果你試圖找到孩子li ...

Answer 2

您不需要jquery。

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/