Sidebar/Menu searching

sidebar-search.md

Search Input

<form action="">
    <div class="form-group py-0">
        <input name="term" type="text" class="form-control sidebar-search ltr"
            value="" placeholder="{{ __('Search Menu Here') }}...">
    </div>
</form>

Sidebar/Menu

<div class="sidebar">
    <ul class="nav nav-primary">
        <li class="active nav-item">
            <a href="#">
                <i class="fas fa-home"></i>
                <p>{{ __('Dashboard') }}</p>
            </a>
        </li>
        <li class="nav-item">
            <a data-toggle="collapse" href="#packageManagement">
                <i class="fas fa-receipt"></i>
                <p>{{ __('Package Management') }}</p>
                <span class="caret"></span>
            </a>
            <div class="collapse" id="packageManagement">
                <ul class="nav nav-collapse">
                    <li>
                        <a href="">
                            <span class="sub-item">{{ __('Settings') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

Script

$(".sidebar-search").on('input', function () {
        let term = $(this).val().toLowerCase();

        if (term.length > 0) {
            $(".sidebar ul li.nav-item").each(function (i) {
                let menuName = $(this).find("p").text().toLowerCase();
                let $mainMenu = $(this);

                // if any main menu is matched
                if (menuName.indexOf(term) > -1) {
                    $mainMenu.removeClass('d-none');
                    $mainMenu.addClass('d-block');
                } else {
                    let matched = 0;
                    let count = 0;
                    // search sub-items of the current main menu (which is not matched)
                    $mainMenu.find('span.sub-item').each(function (i) {
                        // if any sub-item is matched  of the current main menu, set the flag
                        if ($(this).text().toLowerCase().indexOf(term) > -1) {
                            count++;
                            matched = 1;
                        }
                    });


                    // if any sub-item is matched  of the current main menu (which is not matched)
                    if (matched == 1) {
                        $mainMenu.removeClass('d-none');
                        $mainMenu.addClass('d-block');
                    } else {
                        $mainMenu.removeClass('d-block');
                        $mainMenu.addClass('d-none');
                    }
                }
            });
        } else {
            $(".sidebar ul li.nav-item").addClass('d-block');
        }
    });