Search list items (menus)

See more:

Javascript

jQuery

jQuery-UI

Hi,

In my page menus are there . Menus contains sub-menus , sub-menus and Multiple sub-menus.

I kept search box for search menu items , sub menus items. I written code which helps to search as per menu name ... If entering text related to Main menu , it need to show all sub menus also. But my code not working if sub-menus related to different text.

When i am entering , if text matches to main menu text and not to sub menu text , I need to show both main menu and sub menu. But below code hiding submenu.

<ul class="nav" id="side-menu">
                            <div class="sidebar-search">
                                <div class="input-group custom-search-form">
                                    <input type="text" class="form-control" placeholder="Search..." id="txtSearchboxIDCommon" />
                                    <span class="input-group-btn">

                                        <button class="btn btn-default" type="button">
                                            Fruits</a>
            </li>
            <li>
                <a href="#">^__i class="fa fa-bar-chart-o fa-fw">Apple<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="../test/test2.aspx" target="_blank">Orange</a>
                    </li>
                    <li>
                        <a href="../test/test3.aspx" target="_blank">Grapes</a>
                    </li>
                    <li>
                        <a href="../test/test4.aspx" target="_blank">Mango</a>
                    </li>
                </ul>
            </li>
</ul>

$(document).ready(function () {
            $("#txtSearchboxIDCommon").on("keyup click input", function () {

                if (this.value.length > 0) {
                    $("#side-menu li").show().filter(function () {
                        //alert("test");
                        return $(this).find('a').text().toLowerCase().indexOf($("#txtSearchboxIDCommon").val().toLowerCase()) == -1;
                    }).hide();
                }
                else {
                    $("#side-menu li").show();
                }
            });
        });

Thanks,
Suresh P

What I have tried:

<ul class="nav" id="side-menu">
                            <div class="sidebar-search">
                                <div class="input-group custom-search-form">
                                    <input type="text" class="form-control" placeholder="Search..." id="txtSearchboxIDCommon" />
                                    <span class="input-group-btn">

                                        <button class="btn btn-default" type="button">
                                            Fruits</a>
            </li>
            <li>
                <a href="#">^__i class="fa fa-bar-chart-o fa-fw">Apple<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="../test/test2.aspx" target="_blank">Orange</a>
                    </li>
                    <li>
                        <a href="../test/test3.aspx" target="_blank">Grapes</a>
                    </li>
                    <li>
                        <a href="../test/test4.aspx" target="_blank">Mango</a>
                    </li>
                </ul>
            </li>
</ul>

$(document).ready(function () {
            $("#txtSearchboxIDCommon").on("keyup click input", function () {

                if (this.value.length > 0) {
                    $("#side-menu li").show().filter(function () {
                        //alert("test");
                        return $(this).find('a').text().toLowerCase().indexOf($("#txtSearchboxIDCommon").val().toLowerCase()) == -1;
                    }).hide();
                }
                else {
                    $("#side-menu li").show();
                }
            });
        });