Engineering Back

Twitter Typeahead.js: You Autocomplete Me

Tuesday, 19 February 2013

Twitter typeahead.js is a fast and battle-tested jQuery plugin for auto completion. Today we’re open sourcing the code on GitHub under the MIT license. By sharing a piece of our infrastructure with the open source community, we hope to evolve typeahead.js further with community input.

Twitter Typeahead.js: You Autocomplete Me


If your web application needs a fully-featured queryable search box, typeahead.js can help. Some of its capabilities and features include:

  • Search data on the client, server, or both
  • Handle multiple inputs on a single page with shared data and caching
  • Suggest multiple types of data (e.g. searches and accounts) in a single input
  • Support for international languages, including right-to-left (RTL) and input method editors (IME)
  • Define custom matching and ranking functions
  • Grey text hints that help explain what hitting tab will do


It’s also optimized for large local datasets, so it’s fast for high-latency networks.

Examples

We recommend you take a look at our examples page. There are three ways to get data:

Using local, hard-coded data passed on page render:

$('#input').typeahead([
{
name: 'planets',
local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
}
]);

Using a prefetch URL that will be hit to grab data on pageload and then stored in localStorage:

$('#input').typeahead([
{
name: 'countries',
prefetch: '/countries.json',
}
]);


Or using a queryable API that returns results as-you-type (with the query being passed in the ?q= parameter):

$('#input').typeahead([
{
name: 'countries',
remote: '/countries.json',
}
]);


You can also combine local or prefetch with a remote fallback for the performance of local data combined with the coverage of a remote query API (e.g. quickly search your friends but be able to find anyone on your site). There are lots of options for configuring everything from ranking, matching, rendering, templating engines, and more; check out the README for those details.

If you want to use this with a project like Bootstrap, all you have to do is include the JavaScript file for typeahead.js after Bootstrap’s JavaScript file and use our configuration options.

We initially built typeahead.js to support our needs; now we look forward to improvements and suggestions from the community. To learn more about how typeahead.js works, check out our detailed documentation. To stay in touch, follow @typeahead and submit issues on GitHub. Also, if building web application frameworks like typeahead.js interests you, why not consider joining the flock?

Acknowledgements
Typeahead.js was primarily authored by Tim Trueman (@timtrueman), Veljko Skarich (@vskarich) and Jake Harding (@jakeharding).