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 () {
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 () {
return $(this).find('a').text().toLowerCase().indexOf($("#txtSearchboxIDCommon").val().toLowerCase()) == -1;
}).hide();
}
else {
$("#side-menu li").show();
}
});
});