An Angular.js wrapper around the Twitter Typeahead library.

Downloads in past


19851.0.28 years ago8 years agoMinified + gzip package size for angular-typeahead in KB


sfTypeahead: A Twitter Typeahead directive
Build Status Coverage: 100% Version dependencies Status
A simple Angular.js directive wrapper around the Twitter Typeahead library.

Getting Started

Get angular-typeahead from your favorite source:

Note: angular-typeahead supports Angular.jsangularjs v1.2.x through v1.5.x and depends on typeahead.jstypeahead.js v0.11.x. Make sure dependencies are met in your setup:
  • global: include jQuery, angularjs and typeahead.js before angular-typeahead.js.
  • commonJS (node, browserify): angular-typeahead explicitly requires angular and typeahead.js. (note: with browserify, include jquery.js and typeahead.js externally, because angular does not define a dependency on jquery)
  • amd (require.js): angular-typeahead explicitly requires angular and declares itself as angular-typeahead. Note that typeahead.js does not work well with AMD.js, you may find this workaround useful.


Please feel free to play with the Plnkr: LIVE DEMOplnkr


<input type="text" datasets="datasets" options="options" ng-model="model" editable="editable" sf-typeahead />

See the Plnkr LIVE DEMOplnkr for a complete integrated example.


| Parameter | Default | Description | |---------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | datasets | {} | One or an array of twitter typeahead datasetstwitter datasets. | | options | {} | Optionstwitter options parameter passed directly to twitter typeahead. | | allow-custom | true | Boolean. If false, the model value can not take custom values as text is typed in the input field. |


Please feel free to add any issues to the GitHub issue tracker.
Contributions are welcome but please try to adhere to the folowing guidelines:


Any code you write should be tested. Test the "happy path" as well as corner cases. Code cannot be merged in master unless it achieves 100% coverage on everything. To run tests automatically when a file changes, run npm run watch.
Tests run in Chrome by default, but you can override this by setting the KARMA_BROWSER environment variable. Example:
KARMA_BROWSER=Firefox npm run watch
KARMA_BROWSER=PhantomJS npm run watch

If you are not sure how to test something, ask about it in your pull request description.


I recommend you use a jshint plugin in your editor, this will help you spot errors faster and make it easier to write clean code that is going to pass QA. In any case, npm run watch runs jshint on the code whenever you save.