<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
<input id="searchinp" list="searchres">
<datalist id="searchres">
</datalist>
</div>
var searchRes = [
"longLongLongText",
"longerlongerlongerText",
"not A google Result",
"test"
];
var searchInp = "#searchinp";
var searchResListDD = "#searchres";
var inputTimeout;
$(function(){
console.log("lets go");
$(searchInp)
.on("input", inputChanged)
.on("focus", onInputFocus);
$(searchResListDD).hide();
})
function onInputFocus(e) {
console.log("got focus");
//$(searchResListDD).empty();
if ($(searchInp).val().trim().length != 0) {
handleSearch(e, $(searchInp).val())
}
//closeDropdown();
}
function inputChanged(e)
{
console.log($(searchInp).val());
if ($(searchInp).val().trim().length == 0) {
clearTimeout(inputTimeout);
$(searchResListDD).empty();
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]));
}
}
openDropdown();
if (ul.length > 0)
{
// finally show the dropdown menu
} 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 = $("<option>", {
val: val
});
return li;
}
function closeDropdown()
{
if (!($(searchResListDD).is(":hidden"))){
$(searchResListDD).hide();
}
}
function openDropdown()
{
$(searchResListDD).show();
}
