In a previous post, I described how to use the Twitter Bootstrap Typeahead component. The Twitter Bootstrap team recently announced however that they would be switching to Twitter’s typeahead.js for the next major release. That sounds pretty great to me. typeahead.js is much more powerful than the current Twitter Bootstrap typehead component. Fortunately, since typeahead.js is already available, you don’t have to wait for Twitter Bootstrap v3 to start using it. Using typeahead.js with Twitter Bootstrap isn’t very well documented just yet. As well, there is no documentation to be found on how to use Underscore.js templates with typeahead.js, so I thought I’d help you along here.

We’re going to follow along very similarly to my original Twitter Bootstrap typeahead Tutorial, starting with simple examples and then making our way to more complex object-based data.

This is what we’ll ultimately be building:

Product Search

Product ID: Price:

Start typing any of the products named ‘Deluxe Bicycle’, ‘Super Deluxe Trampoline’ or ‘Super Duper Scooter’ in the product name text input field above. If you select one of the autocomplete options, the form should auto-fill with the ID and price of the product.

You’ll need to make sure typeahead.js-bootstrap.css is declared after the normal bootstrap.css so it can override the CSS where necessary.

Now, just before your closing body tag, you’ll want to include jQuery.js, bootstrap.js and typeahead.js. We’re also going to use underscore.js for templating later, so we might as well do that now. The typeahead.js documentation uses Hogan.js, but I’m used to and like underscore.js, so let’s stick with that. It also gives me an opportunity to document something for which I could find no documentation at present:

Notice that we put this script at the bottom of the page so it is loaded after the previous Scripts all load. We then wait for the Document to be ready before doing anything.

All we have to do is call the typeahead() method on the jQuery element and pass in a dataset definition. You can define multiple datasets. In this case we only have one dataset named ‘products’. Each dataset can be dealt with independently. There’s all kinds of great things you can do with datasets like accessing data remotely, prefetching and preprocessing data and much more. In this simple case though, we’re just going to use some local data; a static array of the 3 product names. We also set the header property to show some HTML at the top of the autocomplete suggestions.

This will produce the following:

Product Search

Give it a try!

Objects

Of course, having just a list of static strings isn’t that interesting. Normally, you would have a list of objects that you’ve received from a remote service. Each object would typically include not only the product name, but perhaps its price and an ID that can be used for database persistence. Let’s update the dataset accordingly:

But we need to do one more thing here. We need to tell typeahead.js the value to display for each object. We need to set the valueKey property to ‘name’ so it knows to look at the name property for each object. You can optionally specify an array of tokens here to help with searching, but by default it will split the value into tokens so let’s just leave that for now.

It would also be nice though, to not only show the product name, but also show its price in the autocomplete suggestions. We can do that with a template. We set the template property in the dataset to the following:

The template above is an Underscore.js template. The typeahead.js docs show examples using Hogan.js, but we’re going to use Underscore.js templates. Any templating engine can be used as long as it supports the expected API. The templating engine needs to be able to create a compiled template by calling a compile(template) method on the engine. Then, you need to be able to call render(context) on the compiled template. We can easily configure Underscore.js to support this by executing the following JavaScript once when the document is ready:

Each object that matches the typed in characters will be passed as the context to the render() method of the template engine. This dataset’s template extracts the name and price properties from the context to generate the appropriate HTML that provides feedback like the following:

Now, in practice you’re going to want to do something with the actual values of the selected object. For this exercise we’ll just show the values.

Let’s add a few more elements to the form to display the product ID & price:

Great tutorial- definitely cleared up some confusion! I’ve been looking for more bootstrap tutorials, but it’s hard to find ones that are well written AND useful. Can’t wait to look at your other tutorials.

No sure if adding functions to underscore is, in fact, overkill? It may be something which has been undated since you wrote the post, but a compiled underscore template is a drop in replacement for other templating engines, ie ;