Optional auto complete is powered by
typeahead plugin of Bootstrap 2,
which has been removed in Bootstrap 3, but is lightweight and functional.
//auto complete's data source is a static array
$('#nav-search-input').typeahead({
source: some_static_array,
updater: function (item) {
//when an item is selected from dropdown menu, focus back to input element
$('#nav-search-input').focus();
return item;
}
});
You can also retrieve auto complete data from a remote database:
//auto complete's data is dynamically retrieved from server
source: function(query, process) {
$.ajax({url: 'source.php?q='+encodeURIComponent(query)}).done(function(result_items){
process(result_items);
})
}