An simple AngularJS directive for Twitter's Typeahead.js and Bootstrap 2 & 3 with support for remote dataset object array, filter and selectedItem.
-
Download the latest version here, and add
angular-typeahead.jsto your HTML<head>, afterangular.jsis 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>
-
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>
-
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 () { // ... };
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!