"searchbox"
Bootstrap 3.3.0 Snippet by mgoegel

<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'); } }

Related: See More


Questions / Comments: