typeahead.js

typeahead.js

Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provided a rich typeahead experience.

Getting Started

How you acquire typeahead.js is up to you.

Preferred method:

• Install with Bower: $ bower install typeahead.js

Other methods:

• Download zipball of latest release.
• Download the latest dist files individually:
  • bloodhound.js (standalone suggestion engine)
  • typeahead.jquery.js (standalone UI view)
  • typeahead.bundle.js (bloodhound.js + typeahead.jquery.js)
  • typeahead.bundle.min.js

Note: both bloodhound.js and typeahead.jquery.js have a dependency on jQuery 1.9+.

Documentation

• Typeahead Docs
• Bloodhound Docs

Examples

For some working examples of typeahead.js, visit the examples page.

Browser Support

• Chrome
• Firefox 3.5+
• Safari 4+
• Internet Explorer 7+
• Opera 11+

NOTE: typeahead.js is not tested on mobile browers.

Customer Support

For general questions about typeahead.js, tweet at @typeahead.

For technical questions, you should post a question on Stack Overflow and tag it with typeahead.js.

Issues

Discovered a bug? Please create an issue here on GitHub!

https://github.com/twitter/typeahead.js/issues

Versioning

For transparency and insight into our release cycle, releases will be numbered with the follow format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

• Breaking backwards compatibility bumps the major
• New additions without breaking backwards compatibility bumps the minor
• Bug fixes and misc changes bump the patch

For more information on semantic versioning, please visit http://semver.org/.

Testing

Tests are written using Jasmine and ran with Karma. To run the test suite with PhantomJS, run $ npm test.

Developers

If you plan on contributing to typeahead.js, be sure to read the contributing guidelines. A good starting place for new contributors are issues labeled with entry-level. Entry-level issues tend to require minor changes and provide developers a chance to get more familiar with typeahead.js before taking on more challenging work.

In order to build and test typeahead.js, you'll need to install its dev dependencies ($ npm install) and have grunt-cli installed ($ npm install -g grunt-cli). Below is an overview of the available Grunt tasks that'll be useful in development.

• grunt build – Builds typeahead.js from source.
• grunt lint – Runs source and test files through JSHint.
• grunt watch – Rebuilds typeahead.js whenever a source file is modified.
• grunt server – Serves files from the root of typeahead.js on localhost:8888. Useful for using test/playground.html for debugging/testing.
• grunt dev – Runs grunt watch and grunt server in parallel.

Authors

• Jake Harding

  • @JakeHarding
  • GitHub

• Veljko Skarich

  • @vskarich
  • GitHub

• Tim Trueman

  • @timtrueman
  • GitHub

License

Copyright 2013 Twitter, Inc.

Licensed under the MIT License

Changelog

0.10.1 February 9, 2014

Hotfix

• Fixed bug that prevented some ajax configs from being respected. [#630]
• Event delegation on suggestion clicks is no longer broken. [#118]
• Ensure dataset names are valid class name suffixes. [#610]
• Added support for displayKey to be a function. [#633]
• jQuery#typeahead('val') now mirrors jQuery#val(). [#659]
• Datasets can now be passed to jQuery plugin as an array. [#664]
• Added a noConflict method to the jQuery plugin. [#612]
• Bloodhound's local property can now be a function. [#485]