Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Twitter Bootstrap Typeahead autocomplete example


  • bootstrap with typeahead
  • jquery


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.

// use this hash to cache search results
window.query_cache = {};
// if in cache use cached value, if don't wanto use cache remove this if statement
if( typeof searching != "undefined") {
searching = setTimeout(function() {
return $.getJSON(
{ q:query },
// 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 <input type="text" name="query" id="search-input"/>

ghprod commented Mar 2, 2013

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

Thanks! that helped a lot. 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

Thanks a lot, i use this code to fix my problem close on what you link to ;) this will be faster and you can do more like this if you want more data into this typeahead.

$input.typeahead({source:function(query, process){
'q' : query
return process(data.contentList);

srv89 commented Dec 6, 2016

How to make it work with a dynamic input field. Currently it doesn't seem to work with a dynamic field with is already present on the page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment