angular-typeahead

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

Added by: Sam Deering

GitHub

Repository

icereval/angular-typeahead

Stats

Stars: 8

Watchers: 8

Forks: 2

Module Description

Angular-Typeahead

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

Usage

  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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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 person.id === $scope.selectedItem.id;
            });
    
            if (!exists) {
                $scope.people.push($scope.selectedItem);
            }
    
            // 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 person.id === item.id;
            });
        });
    };
    
    $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.

Changelog

0.5.x

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!