<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(); } }); });