tl;dr

To use Twitter Typeahead.js with Backbone.js, you need to set up the typeahead function in a Backbone view’s render(). And you need to style the typeahead dropdown appropriately with css.

What is Twitter Typeahead?

Twitter Typeahead is a autocomplete/suggestion engine made for text fields on websites. As a dependency, Typeahead requires jQuery.

Typeahead with Backbone

1

Check the Typeahead examples and find the example that is suitable for your app’s use case.

2

Copy the example js code and create a function in the view which is responsible for generating the form.

// ...

this.twitterTypeahead: function() {
  // constructs the suggestion engine
  var states = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    // `states` is an array of state names defined in "The Basics"
    local: $.map(states, function(state) { return { value: state }; })
  });

  // kicks off the loading/processing of `local` and `prefetch`
  states.initialize();

  $('#bloodhound .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'states',
    displayKey: 'value',
    // `ttAdapter` wraps the suggestion engine in an adapter that
    // is compatible with the typeahead jQuery plugin
    source: states.ttAdapter()
  });
},

// ...

3

This function should run within the view’s render() function.

// ...
this.redner: function() {
  // ...
  this.twitterTypeahead();
  // ...
},
// ...

4

You need to style the typeahead drowpdown. See this stackoverflow thread for more info.

5 Optional

If you happen to use a remote source for data, use the remote example in the Twitter Typeahead example page. Also on the server side, set up routes, controller etc. for allowing the Typeahed to make calls to your server for data.