A simple directive for AngularJS and Twitter's Typeahead with Bootstrap 2 & 3

Added by: Sam Deering





Stars: 8

Watchers: 8

Forks: 2

Module Description


An simple AngularJS directive for Twitter's Typeahead.js and Bootstrap 2 & 3 with support for remote dataset object array, filter and selectedItem.


  1. Download the latest version here, and add angular-typeahead.js to your HTML <head>, after angular.js is included.

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="underscore.js"></script>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-typeahead.js"></script>
  2. Add a typeahead element to your view.

    <input type="text" class="form-control" filter="onFilter(parsedResponse)" selected-item="selectedItem" url="api/person/?name=%QUERY" value-key="name" ng-typeahead>
  3. Implement the directive in your controller.

    $scope.people = Person.query();
    $scope.onAdd = function () {
        if (_.isObject($scope.selectedItem)) {
            var exists = _.find($scope.people, function (person) {
                return === $;
            if (!exists) {
            // a blank string will tell the control to clear/reset.
            $scope.selectedItem = '';
    $scope.onFilter = function (parsedResponse) {
        // Remove any users already in the person list.
        return _.filter(parsedResponse, function (item) {
            return !_.find($scope.people, function (person) {
                return ===;
    $scope.onSave = function () {
        // ...

Bootstrap Integration

Twitter's Typeahead.js supports bootstrap 2.x integration currently. Here is a quick hack to get it working with form-control/ie8 in bootstrap 3.



Initial release!

Module stats last updated: 2015-06-08 00:25:51

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!