Boostrap 3.1.1 and typeahead.js 0.10.1 will play nicely together, but it takes some digging and some dependencies to make it to make it all work, but when it does, it’s pretty glorious.

Bootstrap 2 once contained a lovely typeahead engine but it was decided it didn’t work well enough and they would focus on their styles and let another team handle typeahead which typeahead.js has created.

Typeahead 0.10 splits the typeahead engine and the suggestion engine, Bloodhound, into to separate pieces.  They hope that 0.10 will become the 1.0 standard release so I figured it was worth my while to migrate my code to that to say upgrade-friendly.  Unfortunately there’s a big difference in what needs to be done with typeahead 0.9 than 0.10 so here’s a couple examples of how I’m using it with remote sources which will hopefully help someone else figure things out.

First we need to include things.
[snippet id=”72″]

Above and beyond the bootstrap and typeahead, you’ll need to get yourself a copy of the amazing typeahead.css which can be found on github and resolves all of the alignment issues with combining Bootstrap and typeahead.js. You’ll also need the Handlebars engine if you want to display something other than <p>{{displayKey}}</p> in your suggestion.

Then we need to add all our javascript to load the remote source of JSON and display it to our user.
[snippet id=”74″]

If the user searched for Colin for example, you’d return something like this JSON, maybe from PHP…
[snippet id=”76″]