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.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/typeahead.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="//" ></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>
<script src="js/handlebars-v1.3.0.js"></script>

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.

$(document).ready(function() {
    var usersengine = new Bloodhound({
		name: "users",
		remote: {
			url: "//hostname.tld/users?searchuser=%QUERY",
			filter: function(parsedResponse) {
				var dataset = [];
				for (i = 0; i < parsedResponse.length; i++) {
						userID: parsedResponse[i].userID,
						username: parsedResponse[i].username,
						first: parsedResponse[i].first,
						last: parsedResponse[i].last,
						email: parsedResponse[i].email,
						tokens: parsedResponse[i].tokens
				return dataset;
		datumTokenizer: function(d) { return d.tokens; },
		queryTokenizer: Bloodhound.tokenizers.whitespace

		highlight: true
		displayKey: "username",
		limit: 10,
		source: usersengine.ttAdapter(),
		templates: {
			suggestion: Handlebars.compile('<p><i>{{username}}</i> - {{first}} {{last}}</p><p>{{email}}</p>')

If the user searched for Colin for example, you'd return something like this JSON, maybe from PHP...


MichaelDroda - 2017-11-01 05:10:34
Hi need a man for sex) if I'm interested in you write to me in a personal here right here We are glad to see you in our midst what about oral sex you tell me to Cuny and I'll give you a Blowjob my nickname (Angelina52)(Angela66) Copy the link and go to me...
FastFranziska - 2017-09-18 03:04:57
I see you don't monetize your website, don't waste your traffic, you can earn extra cash every month because you've got hi quality content. If you want to know how to make extra bucks, search for: best adsense alternative Boorfe's tips
johhnyprets - 2017-07-07 18:47:12
dxky3cfieclr66p730 google google qjyjy2pip6lf0u93mu
Kim - 2015-02-15 01:57:01
Hey Weezy Geek, Thanks for this - it's the best example I have come across in about two hours of searching!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>