<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4 ">
<label class="form-control-label" for="">Time</label>
<div class="dropdown-select warning">
<a class="select">1 Hour 15 Minutes</a>
<div class="search-box">
<i class="fa fa-search"></i>
<input type="text" placeholder="Search" class="seach-control" />
</div>
<ul class="option-list">
<li><a href="JavaScript:Void(0);">15 Minutes </a></li>
<li><a href="JavaScript:Void(0);">30 Minutes</a></li>
<li><a href="JavaScript:Void(0);">45 Minutes</a></li>
<li><a href="JavaScript:Void(0);">1 Hour</a></li>
<li><a href="JavaScript:Void(0);">1 Hour 15 Minutes</a></li>
<li><a href="JavaScript:Void(0);">1 Hour 30 Minutes</a></li>
<li><a href="JavaScript:Void(0);">1 Hour 45 Minutes</a></li>
<li><a href="JavaScript:Void(0);">2 Hour</a></li>
<li><a href="JavaScript:Void(0);">2 Hour 15 Minutes</a></li>
<li><a href="JavaScript:Void(0);">2 Hour 30 Minutes</a></li>
<li><a href="JavaScript:Void(0);">2 Hour 45 Minutes</a></li>
<li><a href="JavaScript:Void(0);">3 Hour</a></li>
<li><a href="JavaScript:Void(0);">3 Hour 15 Minutes</a></li>
<li><a href="JavaScript:Void(0);">3 Hour 30 Minutes</a></li>
<li><a href="JavaScript:Void(0);">3 Hour 45 Minutes</a></li>
<li><a href="JavaScript:Void(0);">3 Hour</a></li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', function(event) {
if (!$(event.target).closest('.dropdown-select').length) {
$('.option-list, .search-box').hide();
}
});
$('.select').click(function(event) {
//$('.option-list, .search-box').hide();
$(this).closest('.dropdown-select').find('.option-list, .search-box').toggle();
$('.option-list a').click(function(){
var select = $(this).text();
$(this).closest('.dropdown-select').children('.select').text(select);
$('.option-list, .search-box').hide();
});
});
//Search
$('.seach-control').keyup(function(){
var val = $(this).val().toLowerCase();
var list = $(this).closest('.dropdown-select').find('li')
list.each(function()
{
var text = $(this).text().toLowerCase();
if(text.indexOf(val)==-1)
{
$(this).hide();
}
else
{
$(this).show();
}
})
});
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
body{
background-color: #f8fbfd;
}
/*=====================================*/
.search-box{
box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
}
.dropdown-select {
position: relative;
display: inline-block;
text-align: left;
width: 100%;
box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
}
.dropdown-select .select {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 11px 35px 11px 12px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.dropdown-select .select:after {
content: '';
position: absolute;
border: 5px solid transparent;
border-top: 5px solid #555;
top: 14px;
right: 10px;
}
.dropdown-select .select:before {
content: '';
position: absolute;
width: 1px;
background: #ddd;
top: 0;
bottom: 0;
right: 30px;
}
.dropdown-select .option-list {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.17);
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.17);
font-size: 14px;
left: 0;
list-style: none;
margin: 2px 0 0;
max-height: 220px;
overflow-y: auto;
padding: 5px 0;
position: absolute;
top: 107px;
z-index: 100;
width:100%;
display: none;
}
.dropdown-select .option-list a {
clear: both;
color: #8898aa;
display: block;
line-height: 2;
padding: 3px 20px;
white-space: nowrap;
text-decoration: none;
}
.dropdown-select .search-box {
position: absolute;
left: 0;
top: 100%;
display: inline-block;
width: 100%;
display: none;
background-color: #eaf0f6;
padding: 12px;
/* position: relative; */
}
.search-box .fa{
position: absolute;
right: 33px;
top: 29px;
z-index: 9;
color:#8898aa;
font-size: 16px;
}
.dropdown-select .search-box + .option-list {
margin-top: 0px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0;
border-radius: 0 0 4px 4px;
border-top: none;
}
.dropdown-select .seach-control {
width: 100%;
height: 38px;
border: 1px solid #dae1ec;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
margin-top: 5px;
padding: 5px 5px 5px 30px;
}
.dropdown-select .search-icon {
position: absolute;
width: 13px;
height: 13px;
border: 2px solid #ccc;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
display: inline-block;
left: 10px;
z-index: 2;
top: 12px;
}
.dropdown-select .search-icon:after {
content: '';
width: 3px;
height: 7px;
background: #ccc;
position: absolute;
top: 7px;
left: -3px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.warning .select {
background: #ffffff;
color: #8898aa;;
width: 100%;
}
.warning .select:after {
border-top-color: #8898aa;
}
.warning .select:before {
background: transparent;
}
.warning .search-icon {
border-color: #fff;
}
.warning .search-icon:after {
background: #fff;
}
.warning .option-list a:hover {
background: #e5f5f8;
}
.search-box input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #8898aa;
}
.search-box input::-moz-placeholder { /* Firefox 19+ */
color: #8898aa;
}
.search-box input:-ms-input-placeholder { /* IE 10+ */
color: #8898aa;
}
.search-box input:-moz-placeholder { /* Firefox 18- */
color: #8898aa;
}
