Twitter Typeahead.js v0.10

Twitter Typeahead.js has been updated and there are a lot of changes. I'm going to give a an explanation for a few of their examples and explain the key features and changes that they have made. For those looking to upgrade to this new version it will require a rewrite of your current Typeahead.js methods so please be aware of that. The biggest changes are outlined in their changelog.

The most important change in 0.10.0 is that typeahead.js was broken up into 2 individual components: Bloodhound and jQuery#typeahead. Bloodhound is an feature-rich suggestion engine. jQuery#typeahead is a jQuery plugin that turns input controls into typeaheads.

Let's head to the examples.

// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [
    { num: 'one' },
    { num: 'two' },
    { num: 'three' },
    { num: 'four' },
    { num: 'five' },
    { num: 'six' },
    { num: 'seven' },
    { num: 'eight' },
    { num: 'nine' },
    { num: 'ten' }
  ]
});

// initialize the bloodhound suggestion engine
numbers.initialize();

// instantiate the typeahead UI
$('.example-numbers .typeahead').typeahead(null, {
  displayKey: 'num',
  source: numbers.ttAdapter()
});

The most basic of basic. Here we have a static list of local data. Bloodhound needs to be initialized with your data and you can see it handles splitting data up by white space with their tokenizers. This makes things a lot easier because in previous versions you needed to make sure the tokens to be searched through were already split up by white space. The Bloodhound object is then initialized and the typeahead object is created. This is a lot more code but it makes the search more robust as we will see with a more advanced example using prefetch and remote data.

var films = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: '../data/films/queries/%QUERY.json',
  prefetch: '../data/films/post_1960.json'
});

films.initialize();

$('.example-films .typeahead').typeahead(null, {
  displayKey: 'value',
  source: films.ttAdapter(),
  templates: {
    suggestion: Handlebars.compile(
      '<p><strong>{{value}}</strong> – {{year}}</p>'
    )
  }
});

Here we see a very similar example to the one above except that we are getting our data from a URL. The prefetch variable works to get a set of data and cache it locally. Even if the page is reloaded that data stays with the user's browser until it expires or is removed. As the user begins their search it will have that data ready and on hand but if there is no data to be found in the prefetch Typeahead.js has another URL, stored in the remote variable, that it can make a query to and get data back about what the user is searching for. These two in conjunction work fantastically well for supplying the user with a set of data that has the speed of being static but can be dynamic by querying the URL for more data as the user goes. Again we initialize the Bloodhound object and add it to the typeahead initialization. We are again using the Handlebars template rendering engine to make the search results look great so that hasn't changed. The changes are drastic but not hard. This is a major update to Twitter Typeahead.js and because of that there is deprecation. My other posts are still useful for older versions but may not apply to versions going forward. I hope this was helpful in getting you up to speed with the latest version of Twitter Typeahead.js. If you have any questions or comments feel free to leave them below.