Am angularjs directive wrapper for Twitter Bootstrap's typeahead plugin
3 people use it
Author: igreulich

Angular Typeahead

This is my Typeahead directive. It simply wraps Twitter Bootstrap's Typeahead js plugin in a directive so your Angularjs app will 'see' your selection.


You need to include the igTypeahead.js file before your app, but after angular.

This directive creates a new html element (!) called typeahead. In your markup you put <typeahead></typeahead>, and anguar will replace it with an <input /> when bootstrapping/rendering.

At a minimum, <typeahead> needs a choice, and list attribute, where the value of choice is the model the selected choice is to be stored, and list is either an array of strings, or a function that returns an array of strings.

For example…

You can add any other attributes to <typeahead>, such as placeholder or autocomplete, and they will just get passed along to the <input /> that angular creates while rendering/bootstrapping.


  • Angularjs (Tested against 1.0.1 and 1.0.4)
  • Bootstrap Typeahead jQuery plugin (which, inturn requires jQuery) (Tested against 2.0.0 through 2.2.2)
comments powered by Disqus
This page was last updated over 5 years ago.