Filter Bootstrap Navbar DropDownList item on TextBox Keyup event in JavaScript

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Jan 16, 2019 12:21 AM
Forum: JavaScript
Answer: 1
Views: 6677
Sample Code: Download

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>

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jan 16, 2019 06:03 AM
Modified: on Jan 17, 2019 02:19 AM
Report

Hi mahesh213,

Refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript">
    function myFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("mySearch");
        filter = input.value.toUpperCase();
        ul = document.getElementById("left-panel");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            if (li[i].className != "menu-item-has-children dropdown") {
                a = li[i].getElementsByTagName("a");
                for (var j = 0; j < a.length; j++) {
                    if (a[j].className != "dropdown-toggle") {
                        if (a[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                            li[i].style.display = "";
                        } else {
                            li[i].style.display = "none";
                        }
                    }
                }
            }
        }
    }
    function Reset() {
        document.getElementById('mySearch').value = "";
        myFunction();
    }
</script>
<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>
<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="button" onclick="Reset()">
    <i class="fa fa-close"></i>
</button>
</form>

Demo

Filter Bootstrap Navbar DropDownList item on TextBox Keyup event in JavaScript

Company

Explore

Follow us

Contact Us