A simple Angular.js directive wrapper around the Twitter Typeahead library.
- jQuery v1.6+
- Angular.js
- typeahead.js v0.10.x
<body ng-controller="MyController">
<input type="text" name="search" class="typeahead" cjl-typeahead="myTypeahead" typeahead-options="null" typeahead-datasets="typeaheadDatasets" placeholder="search user">
<!--
Directive: cjl-typeahead
Attributes:
* typeahead-options - this will be passed to the typeahead constructor
* typeahead-datasets - this will be passed to the typeahead constructor
-->
</body> var app = angular.module('app',['cjl.typeahead']);
app.controller('MyController',function($scope){
$scope.$watch('typeahead',function(o,typeahead){
// we name the directive "cjl-typeahead" - myTypeahead
// use the method "$on" to add listeners to dom, jquery, typeahead events
typeahead.myTypeahead.$on('typeahead:selected',function(e,selected){
$scope.selectedData = selected;
});
typeahead.myTypeahead.$on('typeahead:cursorchange',function(e, selected, p){
console.log(selected);
});
});
$scope.typeaheadDatasets={
display:['name'],
source:function(q,cb){
cb(users);
}
}
});