[英]how to filter a multilevel menu with a search input
困难在于菜单具有多个级别(如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>
$("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
...
您不需要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";
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.