Search Drop down with sections and section headers

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div class="container-fluid">
<input class="form-control dropdown-toggle" style="width:200px;" id="searchInBox" data-toggle="dropdown" onkeyup="filter(this)" value=""/>
<ul class="dropdown-menu searchBoxDropDownUl" role="menu" aria-labelledby="searchInBox" style="top:auto;left:auto;min-width: 200px;">
<li role="presentation" class="dropdown-header">Dropdown header 1</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header 2</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
<script>
//j$ = jQuery.noConflict();
$(".searchBoxDropDownUl a[role=menuitem]").click(function(event){
event.preventDefault();
$("‪#‎searchInBox‬").val($(this).text());
console.log($(this).text());
});
function filter(element) {
var value = $(element).val().toLowerCase();
console.log(value);
$(".searchBoxDropDownUl a[role=menuitem]").each(function(){
console.log($(this).text())
if ($(this).text().toLowerCase().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
</body>
</html>




Comments

Popular posts