Upgrading from Bootstrap's Typeahead to Typeahead.js

A guide for swapping from Bootstrap Typeahead to Typeahead.js

Aug 2013
Updated: Jul 2023
725 words
JavaScript

For those of us who use Bootstrap in our projects there was some excellent news this week that Bootstrap is now officially on version 3. It brings with it a lot of cool changes. One of the not so cool ones when you attempt to upgrade is that Bootstrap have dropped support for Typeahead.

The recommended course of action is to upgrade to Typeahead.js, another project by Twitter that aims to solve the typeahead problem a little more soundly.

In this article I am going to discuss one of the quickest ways to change your code to work well with Typeahead.js.

Including Typeahead.js

The first thing we need to do is install Typeahead.js, the recommended way to do this is using Bower, but for speed and for less code we will just grab the latest version from the Typeahead.js git repository, I would recommend including this below where you include Bootstrap, so your HTML may look something like this;

<body>
    <!-- My Awesome Site Stuff -->
    <script src="my/link/to/bootstrap.js"></script>
    <script src="my/link/to/typeahead.js"></script>
</body>

With this in place Typeahead.js will take precedence even if you are running the older 2.3 version of Bootstrap, which is nice because Typeahead.js is way better than the old Bootstrap implementation.

Swapping the Typeaheads

Now we need to make some slight changes to our calls to .typeahead.

There are really two ways we collected data with Bootstrap, the first was with an array of data, the second was by passing in function that would normally go off to a server and make the call, I will tackle both of these.

Upgrading Local Data

If we included data locally by doing something similar to this (borrowed from the official Bootstrap example);

<input type="text" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="['Alabama','Alaska','West Virginia','Wisconsin','Wyoming']">

Then what we would have in its place when we call .typeahead is;

$('input').typeahead({
name: 'States',
local: ["Alabama","Alaska","West Virginia","Wisconsin","Wyoming"]
});

We could alternatively load these in from a .json file using what is known as prefetch, in this case we would generate the .json file up front and call it like so;

$('input').typeahead({
name: 'States',
prefetch: '/path/to/my/json_file.json'
});

Upgrading Server Side Data

If we stored our data on the server side with the Bootstrap method then our code might have looked something like this;

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/my_search_url', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

I will be honest, this always kind of confused me when I looked at code examples, I think Typeahead.js has a much nicer solution, with it our code would be something like;

$('.typeahead').typeahead({
  name 'my_search',
  remote: '/my_search_url/?q=%QUERY'
});

The above example assumes that you will be sending back a valid set of datums (collections of data the typeahead.js can handle), what you were originally returning for the Bootstrap typeahead will almost certainly be compatible.

Wrapping Up

Hopefully this post has been of some use to you, of course I only scratched the surface of what can be done with Typeahead.js, for more information on it be sure to check out the Github page or consult the book that I am writing on it!