SCENARIO: My objective is to filter the default menu in a side nav skin. My stakeholders do not want multiple user panels to filter a main menu (ie., a panel for the default menu, one for a menu proxy list, etc. The Glossary and/or Index must be a separate panel, I believe?).
They want an almost-all-in-one menu, meaning they want a single menu that allows users to navigate by product (TOC) and that also allows users to filter by menu item titles.
- In the example I'm providing here, Features and Procedures are parent menu items with three children whose names include a number in the string 1, 2, or 3.
- If I search for 3, no results show. If I expand Features and Procedures and collapse them, and then I search for 3, the menu expands and the filtered items show like I want them to!
JavaScript: If you're able to help figure out what I've done wrong in the code below I'll buy you a drink sometime (or something). I really only have two questions about it (highlighted as JIMG comments below). What am I missing in the JavaScript code that would correct this issue?
Code: Select all
$(document).ready(function() {
$('#searchInputFilter').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
filterAccordionMenu($('.sidenav-container'), searchTerm);
});
});
function filterAccordionMenu($element, searchTerm) {
$element.find('li').each(function() {
var listItemText = $(this).text().toLowerCase();
if (listItemText.indexOf(searchTerm) === -1) {
$(this).hide();
} else {
$(this).show();
/*=====JIMG Question: Is "parentsUntil" correctly used here?====*/
$(this).parentsUntil('.sidenav-container').show();
}
});
/*=====JIMG Question: Should "find" be "children" in $element.find?====*/
$element.find('.sidenav-container').each(function() {
filterAccordionMenu($(this), searchTerm);
});
}
JimG