MadCap Software Forums

Posted: **Mon May 29, 2023 4:08 pm**

Hey

friends! I'm having the JavaScript issue described below (visual example attached).

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!

Here's a visual example of what I'm seeing (open the MP4).

filterMenu.mp4

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

Thank you so much!
JimG

Posted: **Mon May 29, 2023 4:13 pm**

Apologies.... here's the MP4 example.

RevisedFilterMenuExample.mp4

Posted: **Mon May 29, 2023 11:01 pm**

Replied to in the Slack group.

For anyone else:

Your problem is that the Side Nav menu does not load the full menu initially - MadCap's script only loads the items as you open the menu and they become visible.
If you inspect the topic's HTML using the browser dev tools (F12), you'll see the child menu items don't exist until you open them up.
So your script is working, but it's only going to filter what's actually there in the HTML.

See previous post: viewtopic.php?t=34209

MadCap Software Forums

Filter the Side Nav Menu

Filter the Side Nav Menu

Re: Filter the Side Nav Menu

Re: Filter the Side Nav Menu