Hi,
I have menu bar in that i have search functionality
coming to my requirement is if i can type any word on search textbox i need to display relevant dropdown values on side menu
I have shared you sample code
Note:you can use jquery/javascript no issue(I have used javascript)
Could you kindly please help me
//Dropdown list
<aside id="left-panel" class="left-panel">
<ul class="nav navbar-nav">
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-tasks"></i>Icons</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-fort-awesome"></i><a href="font-fontawesome.html">Font Awesome</a></li>
<li><i class="menu-icon ti-themify-logo"></i><a href="font-themify.html">Themefy Icons</a></li>
</ul>
</li>
</ul>
</aside>
/search input
<form class="search-form">
<input class="form-control mr-sm-2" type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search ..." aria-label="Search">
<button class="search-close" type="submit"><i class="fa fa-close"></i></button>
</form>
//search functionality code
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("main-menu collapse navbar-collapse");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>