Filter the Side Nav Menu

This forum is for all Flare issues not related to any of the other categories.
Post Reply
jimgilliam
Propeller Head
Posts: 81
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Filter the Side Nav Menu

Post by jimgilliam »

Hey :flare: 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
:flare:
jimgilliam
Propeller Head
Posts: 81
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Filter the Side Nav Menu

Post by jimgilliam »

Apologies.... here's the MP4 example.
RevisedFilterMenuExample.mp4
You do not have the required permissions to view the files attached to this post.
:flare:
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Filter the Side Nav Menu

Post by NorthEast »

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
Post Reply