09 May
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.
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.
Latest posts by Rajeev Achra (see all)
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016