A very simple Angular.js wrapper around the Twitter Typeahead library.

Angular Core Dependency: 1.5.x

Module License: MIT

Added by: Sam Deering





Stars: 133

Watchers: 133

Forks: 56

Module Description

sfTypeahead: A Twitter Typeahead directive

A simple Angular.js directive wrapper around the Twitter Typeahead library.

License: MIT

Getting Started

How you acquire angular-typeahead is up to you.

Preferred method:

  • Install with [Bower][bower]: $ bower install angular-typeahead

Other methods:

  • Download latest [angular-typeahead.js][angular-typeahead.js] or [angular-typeahead.min.js][angular-typeahead.min.js].

Note: angular-typeahead.js has dependencies on the following libraries:

  • [typeahead.js][typeahead.js] v0.10.x
  • [bloodhound.js][typeahead.js] v0.10.x
  • [Angular.js][angularjs]
  • [jQuery][jquery] v1.9+

All of which must be loaded before angular-typeahead.js.


Please feel free to play with the Plnkr: [LIVE DEMO][plnkr]


Please feel free to add any issues to the GitHub issue tracker.

However if I may make one request, no "+1" comments, either add something worthwhile, or nothing at all.


The bare bones:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="typeahead.js"></script>
<script type="text/javascript" src="bloodhound.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-typeahead.js"></script>
  // Create the application and import the siyfion.sfTypeahead dependency.
  angular.module('myApp', ['siyfion.sfTypeahead']);
<body ng-app="myApp">
    <input type="text" class="sfTypeahead" options="exampleOptions" datasets="exampleData" ng-model="foo">
    <input type="text" options="exampleOptions" datasets="multiExample" ng-model="foo" sf-typeahead>
// Define your own controller somewhere...
function MyCtrl($scope) {

  // Instantiate the bloodhound suggestion engine
  var numbers = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [
      { num: 'one' },
      { num: 'two' },
      { num: 'three' },
      { num: 'four' },
      { num: 'five' },
      { num: 'six' },
      { num: 'seven' },
      { num: 'eight' },
      { num: 'nine' },
      { num: 'ten' }

  // initialize the bloodhound suggestion engine

  // Allows the addition of local datum
  // values to a pre-existing bloodhound engine.
  $scope.addValue = function () {
      num: 'twenty'

  // Typeahead options object
  $scope.exampleOptions = {
    highlight: true

  // Single dataset example
  $scope.exampleData = {
    displayKey: 'num',
    source: numbers.ttAdapter()

  // Multiple dataset example
  $scope.multiExample = [
      name: 'nba',
      displayKey: 'team',
      source: nba.ttAdapter()   // Note the nba Bloodhound engine isn't really defined here.
      name: 'nhl',
      displayKey: 'team',
      source: nhl.ttAdapter()   // Note the nhl Bloodhound engine isn't really defined here.

  $ = null;


The following attributes are available to provide additional configuration.

| Option | Default | Description | |---------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | suggestionKey | null | The key on the selected typeahead suggestion object for which the corresponding value is used as the model's new value. If null, the entire suggestion object/value is set as the model. |

[angular-typeahead.js]: [angular-typeahead.min.js]: [bower]: [jQuery]: [angularjs]: [typeahead.js]: [plnkr]:

Module stats last updated: 2017-12-29 16:00:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!