Typeahead.js – A Fast & Fully Featured Auto-Complete Library is inspired by Twitter.com

Typeahead.js is inspired by twitter.com’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library. It displays suggestions to end-users as they type.

It works with hardcoded data as well as remote data. It allows for suggestions to be drawn from multiple datasets. It supports customized templates for suggestions. It also plays nice with RTL languages and input method editors. It is licensed under MIT License.

Features

• Displays suggestions to end-users as they type
• Shows top suggestion as a hint (i.e. background text)
• Works with hardcoded data as well as remote data
• Rate-limits network requests to lighten the load
• Allows for suggestions to be drawn from multiple datasets
• Supports customized templates for suggestions
• Plays nice with RTL languages and input method editors

Why not use X?

At the time Twitter was looking to implement a typeahead, there wasn’t a solution that allowed for prefetching data, searching that data on the client, and then falling back to the server. It’s optimized for quickly indexing and searching large datasets on the client. That allows for sites without datacenters on every continent to provide a consistent level of performance for all their users. It plays nicely with Right-To-Left (RTL) languages and Input Method Editors (IMEs). We also needed something instrumented for comprehensive analytics in order to optimize relevance through A/B testing. Although logging and analytics are not currently included, it’s something we may add in the future.

Bootstrap Integration

For simple autocomplete use cases, the typeahead component Bootstrap provides should suffice. However, if you’d prefer to take advantage of some of the advance features typeahead.js provides, here’s what you’ll need to do to integrate typeahead.js with Bootstrap:

• If you’re customizing Bootstrap, exclude the typeahead component. If you’re depending on the standard bootstrap.js, ensuretypeahead.js is loaded after it.
• The DOM structure of the dropdown menu used by typeahead.js differs from the DOM structure of the Bootstrap dropdown menu. You’ll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap theme.

Authors

• Tim Trueman (Twitter / GitHub)
• Veljko Skarich (Twitter / GitHub)
• Jake Harding (Twitter / GitHub)

Related posts: