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:
<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>
<script>
// Create the application and import the siyfion.sfTypeahead dependency.
angular.module('myApp', ['siyfion.sfTypeahead']);
</script>
<body ng-app="myApp">
<input type="text" class="sfTypeahead" options="exampleOptions" datasets="exampleData" ng-model="foo">
<!-- OR USING AN ATTRIBUTE -->
<input type="text" options="exampleOptions" datasets="multiExample" ng-model="foo" sf-typeahead>
<body>// 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
numbers.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;
};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. |