Filter a multilevel menu with a search input

Mostly you can use select2 js for drop down which are basically use html select tag, but sometime we need same functionality on ul -li based menu. Here i am explaining with code part to implement search input on ul-li based menu item. I am going to do basic for more you can modify and use ajax for proper output.

I a using below js and css files

1. jquery min js
2. jquery ui min js
3. fon awesome css
4. custom css for drop down

Link are

google library
Font-awesome css

Custom Css

<style>
.div_search_wrap{
	width:50%;
}
.select_drop{
	width:94%; border:solid 1px #e2e2e2; padding:4px 15px; line-height:30px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; float:left; position:relative; font-size:14px;
}
.select_drop i{float:right; font-size:23px; margin-top:5px; color:#888}
.select_drop.open i.fa-caret-down:before{content: "\f0d8" !important;}
.select_drop .bottom-opendiv ul li i{line-height:35px;}
.select_drop .bottom-opendiv{width:100%; display:none; -webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; float:left; position:absolute; left:-1px; top:-1px; border:solid 1px #e2e2e2;background:#fff; -webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
z-index: 9999;}
.bottom-opendiv h2{padding-bottom:10px;}
.select_drop .bottom-opendiv ul{max-height:200px; width:100%; overflow:auto; float:left; padding:0px;}
.select_drop .bottom-opendiv h2 i{float:left; margin-right:10px; line-height:30px;}
.select_drop .bottom-opendiv h2{font-size:14px; padding-left:15px;}
.select_drop .bottom-opendiv ul li{padding:0 3%; line-height:35px; border-bottom:solid 1px #e2e2e2; font-size:14px; float:left; width:94%;}
.select_drop .bottom-opendiv ul li:hover, .select_drop .bottom-opendiv ul li.active{background:#81b745; color:#fff; cursor:pointer;}
.select_drop .bottom-opendiv ul li i.fa-caret-down{margin-top:10px; z-index:1000; float:right;}
.select_drop .bottom-opendiv h2 i.fa-caret-down{margin-right:15px;  float:right;}
.select_drop.open .bottom-opendiv{display:block;}
#menu_wrapper, #sub_menu_wrapper{border-bottom:1px solid #e2e2e2;}
.select_first i{line-height:30px;}
.search_sub_specialty{text-align:center; padding-top:10px!important; list-style:none;}
.search_sub_specialty:hover{background:none!important;}
.select_first span, .bottom-opendiv h2 span{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:90%; display:inline-block}
.form-group-in{width:33%; float:left;}
 .form-group-in > .form-group > input[type="text"]{width:70%}
 #specialty_head_wrapper h2 i, #specialty_head_wrapper li i{font-size:12px !important; line-height:19px;}
.select_first i, h2.select-first i, #specialty_head_wrapper h2 i.fa-caret-down{font-size:23px !important}
.ui-menu .ui-menu-item{font-size:14px; font-family:"Open Sans"; color:#595959; border:solid 1px #fff; padding:7px 10px; cursor:pointer}
.ui-menu .ui-menu-item:hover{background:#81b745; color:#fff;}
.ui-menu.ui-autocomplete{padding:0px;}
.sp-search-first input[type="search"] {
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    color: #595959;
    float: left;
    font-family: "open_sansregular";
    font-size: 14px;
    margin: 0;
    padding: 5px 5px;
    width: 80%;
}
.sp-search-first{
	padding: 10px;
    position: absolute;
    top: 30px;
	width: 80%;
}
</style>

Html Part of Drop Down

<div class="div_search_wrap">
            <label>Find me a from multilevel list</label>
            <div class="select_drop">
                <div class="select_first"><span id="span_heading">Choose Menu item</span><i id="arrow_down_heading" class="fa fa-caret-down"></i></div>
                
                <div class="bottom-opendiv">
                    <div id="menu_wrapper">
                        <h2 class="select_first"><span id="span_item_name">Choose Sub item</span><i class="fa fa-caret-down"></i></h2>
                        <div class="sp-search-first"><input type="search" role="textbox" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" tabindex="0" class="select2-search_field" id="filter"></div>
                        <ul id="menu_list_wrapper">
                        
                        <li class="choose_item" id="1">India<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="2">Iceland<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="3">Indonesia<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="4">Iran<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="5">Iraq<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="6">Ireland<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="7">Israel<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="8">Italy<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="9">Jamaica<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="10">Japan<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="11">Jordan<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="12">Kazakhstan<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="13">Kenya<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="14">Kiribati<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="15">Kosovo<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="16">Kuwait<i class="fa fa-chevron-right"></i></li>
                        <li class="choose_item" id="17">Kyrgyzstan<i class="fa fa-chevron-right"></i></li>
                        
                        </ul>
                    </div>
                
                    <div id="sub_menu_wrapper" style="display:none;">
                        <h2><i id="back_to_menu" class="fa fa-chevron-left"></i><span id="span_sub_menu_name"></span><i class="fa fa-caret-down select_first"></i></h2>
                        <ul id="sub_menu_list_wrapper">
                        <li class="choose_sub_menu" id="8">Rajasthan</li>
                        <li class="choose_sub_menu" id="10">Haryana</li>
                        <li class="choose_sub_menu" id="11">Punjab</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

Script or js Required

<script>
// when clcik on dropdown
$(document).on('click', '.select_first', function(e){
		$( '.select_drop' ).toggleClass("open");
	});
//when choose an item from main menu	
	$(document).on('click', '.choose_item', function(e){
		
		$('#span_sub_menu_name').text($(this).text());
		
		$('#sub_menu_list_wrapper .choose_sub_menu').css("visibility", "visible");
		$('#sub_menu_list_wrapper .choose_sub_menu').css('display','block');
		$('#sub_menu_wrapper').show("slide", { direction: "right" }, 400);						
		$('#menu_wrapper').css('display','none')
		$('#menu_wrapper').hide("slide", { direction: "left" }, 400);

		
	});	
// when choose a sub item from sub menu	
	$(document).on('click', '.choose_sub_menu', function(e){
		
		sub_menu_name = $(this).text();
		
		sub_menu_data = $('#span_sub_menu_name').text().split('--');
		
		sub_menu_f_name = sub_menu_data[0]+' -- '+sub_menu_name;
		
		
		
		$('#span_sub_menu_name').text(sub_menu_f_name);
		$('#span_heading').text(sub_menu_f_name);
		$('.select_first').click();
		
	});
// when clcik on back arrow from sub menu	
	$(document).on('click', '#back_to_menu', function(e){
		
		ins_data = $('#span_sub_menu_name').text().split('--');

		
		$('#span_item_name').text("Choose Menu item");
		
		$('#span_heading').text("Choose Menu item");
		
		$('#menu_wrapper').show("slide", { direction: "left" }, 400);
		$('#sub_menu_wrapper').css('display','none')
		$('#sub_menu_wrapper').hide("slide", { direction: "right" }, 400);
		$('.choose_item').removeClass('active');
		
	});
// when type in search box	
	$(document).ready(function () {
    $("#filter").keyup(function () {
        var filter = $(this).val(),
            count = 0;
        $("li").each(function () {
            if (filter == "") {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            } else if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).css("visibility", "hidden");
                $(this).fadeOut();
            } else {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            }
        });
    });
});
</script>

Now you can combine all code in to a single html file to see result.

Author
Recent Posts

Follow me

Rajeev Achra

I am a software engineer who specializes in Internet applications. I have worked with a wide variety of technologies and programming languages to open source LAMP environments. I have more than 6 years of object-oriented programming experience and am highly proficient in ActionScript, PHP, MYSQL, JavaScript, Jquery and a multitude of other technologies used in modern web applications.

Follow me

Type To Search

Type To Search

Type To Search

how to filter a multilevel menu with a search input

Filter a multilevel menu with a search input

Frequently Asked Questions about Schema Structured Data

List of Google Analytics Spam Referral Websites

Related Posts

jquery autocomplete highlight match

php function group an array on particular key value

Leave a Reply Cancel reply

Start Your Journey to Better Knowledge

+91 98286 51234