<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="dropdown">
<input id="search" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</input>
<ul class="dropdown-menu dropdown-toggle" aria-labelledby="search">
</ul>
</div>
</div>
</div>
var searchRes = [
"longLongLongText",
"longerlongerlongerText",
"not A google Result",
"test"
];
var searchInp = "#search";
var searchResListDD = "ul.dropdown-menu.dropdown-toggle";
var inputTimeout;
$(function(){
console.log("lets go");
$(searchInp)
.on("input", inputChanged)
.on("focus", onInputFocus);
$('.dropdown-toggle').dropdown;
})
function onInputFocus(e) {
console.log("got focus");
$(searchResListDD).empty();
closeDropdown();
}
function inputChanged(e)
{
if ($(searchInp).val().trim().length == 0) {
closeDropdown();
return;
}
// wait 0.5s, while user is entering data
clearTimeout(inputTimeout);
inputTimeout = setTimeout(
function() {
/*console.log("timeout", $(searchInp).val());*/
handleSearch(e, $(searchInp).val())
}, 500);
}
function handleSearch(e, val)
{
var latestData = $(searchInp).val();
if (latestData != val)
return; // user is still typing...
//$('.dropdown-toggle').dropdown();
console.log("searching ", latestData);
// clear search result dropdown first
var ul = $(searchResListDD);
ul.empty();
for (var i = 0; i < searchRes.length; i++) {
console.log("searching ", searchRes[i]);
if (searchRes[i].toLowerCase().search(latestData.toLowerCase()) > -1) {
console.log("found ");
ul.append(createSearchResultEl(searchRes[i]));
}
}
if (ul.length > 0)
{
// finally show the dropdown menu
openDropdown();
} else {
//$('.dropdown-toggle').toggle();
}
}
function handleSearchResultClick(e)
{
var result = $(this).data("val");
$(searchInp).val(result);
//$('.dropdown').attr("aria-expanded", false);
closeDropdown();
}
function createSearchResultEl(val)
{
// create the li element and inside a button
var li = $("<li>").append(
$("<span>",
{
"class": "btn btn-default",
"data-val": val,
text: val
})
.on("click", handleSearchResultClick)
);
return li;
}
function closeDropdown()
{
if (!($('.dropdown').find('.dropdown-menu').is(":hidden"))){
$('.dropdown-toggle').dropdown('toggle');
}
}
function openDropdown()
{
if ($('.dropdown').find('.dropdown-menu').is(":hidden")){
$('.dropdown-toggle').dropdown('toggle');
}
}
