Javascript 如何使用搜索输入筛选多级菜单

困难在于菜单有很多层次，就像matrix admin中的菜单一样，每个层次都很大；如何根据搜索输入的值筛选菜单

输出应该是这样的： 我的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>

---

Onkeypress事件菜单将被过滤。。。。父li将可见，如果您尝试查找子li…

则不需要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";
    }
  });
});

---

分享你的html。。。。！！很抱歉我已经附加了thml。它很简单。。。如果有一份深度的hireachy菜单是fillted@user3796331没有人能比这更清楚地解释如何显示/隐藏特定的ul/li（如果使用css和active等）。如何在特定的div或ul上使用id？它在页面上搜索整个li。只需将类添加到中，并将其添加到文档中即可。QuerySelector以下是一个示例：

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";
    }
  });
});