suresh Palaniyappan

suresh Palaniyappan

  • NA
  • 241
  • 18.7k

Search list items (menus)

Feb 21 2016 12:21 PM
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">                                                                                      </button>                                     </span>                                 </div>                                 <!-- /input-group -->                             </div> <li>                 <a href="../test/test1.aspx" target="_blank">Fruits</a>             </li>             <li>                 <a href="#">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();                 }             });         });


Answers (3)