public
Last active

Twitter Bootstrap Typeahead autocomplete example

  • Download Gist
Readme.md
Markdown

Requirements

  • bootstrap with typeahead
  • jquery

Explanation

This will use bootstrap with typeahead to create an autocomplete search. It shouldn't search until user is done their thought. Aka - fast typers. Right now set to 300ms.

Also caches content from server so you don't make the same call over and over again.

autocomplete.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
$(document).ready(function(){
// use this hash to cache search results
window.query_cache = {};
$('#search-input').typeahead({
source:function(query,process){
// if in cache use cached value, if don't wanto use cache remove this if statement
if(query_cache[query]){
process(query_cache[query]);
return;
}
if( typeof searching != "undefined") {
clearTimeout(searching);
process([]);
}
searching = setTimeout(function() {
return $.getJSON(
"search.json",
{ q:query },
function(data){
// save result to cache, remove next line if you don't want to use cache
query_cache[query] = data;
// only search if stop typing for 300ms aka fast typers
return process(data);
}
);
}, 300); // 300 ms
}
});
});
search.html
HTML
1
Search <input type="text" name="query" id="search-input"/>

This is what i need, work with native bootstrap :)
Thanks, forked it :)

Thanks! that helped a lot.

Sparar.de says thanks for that!

Thanks for the gist. I forked it to tweak a little bit...

  • Made this into a reusable function
  • Store the cache results in association with the $obj passed into the function

https://gist.github.com/rjhilgefort/6234462

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.