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>
$("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
...
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";
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.