A simple Angular.js directive wrapper around the Twitter Typeahead library.
License: MIT
How you acquire angular-typeahead is up to you.
Preferred method:
- Install with Bower:
$ bower install angular-typeahead
Other methods:
- Download latest angular-typeahead.js or angular-typeahead.min.js.
Note: angular-typeahead.js has dependencies on the following libraries:
- typeahead.js v0.10.x
- bloodhound.js v0.10.x
- Angular.js
- jQuery v1.9+
All of which must be loaded before angular-typeahead.js.
Please feel free to play with the Plnkr: LIVE DEMO
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:
<scripttype="text/javascript" src="jquery.js"></script><scripttype="text/javascript" src="typeahead.js"></script><scripttype="text/javascript" src="bloodhound.js"></script><scripttype="text/javascript" src="angular.js"></script><scripttype="text/javascript" src="angular-typeahead.js"></script><script>// Create the application and import the siyfion.sfTypeahead dependency.angular.module('myApp',['siyfion.sfTypeahead']);</script><bodyng-app="myApp"><inputtype="text" class="sfTypeahead" options="exampleOptions" datasets="exampleData" ng-model="foo"><!-- OR USING AN ATTRIBUTE --><inputtype="text" options="exampleOptions" datasets="multiExample" ng-model="foo" sfTypeahead><body>// Define your own controller somewhere...functionMyCtrl($scope){// Instantiate the bloodhound suggestion enginevarnumbers=newBloodhound({datumTokenizer: function(d){returnBloodhound.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 enginenumbers.initialize();// Allows the addition of local datum// values to a pre-existing bloodhound engine.$scope.addValue=function(){numbers.add({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.}];$scope.foo=null;};