I searched in internet, how to implement jQuery UI autocomplete into angularJS. I have found a very good sample and it is working. Here Sourcecode
HTML
JavaScript
x
7
1
<div ng-app='MyModule'>
2
<div ng-controller='DefaultCtrl'>
3
<input auto-complete ui-items="names" ng-model="selected">
4
selected = {{selected}}
5
</div>
6
</div>
7
JS
JavaScript
1
17
17
1
function DefaultCtrl($scope) {
2
$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
3
}
4
5
angular.module('MyModule', []).directive('autoComplete', function($timeout) {
6
return function(scope, iElement, iAttrs) {
7
iElement.autocomplete({
8
source: scope[iAttrs.uiItems],
9
select: function() {
10
$timeout(function() {
11
iElement.trigger('input');
12
}, 0);
13
}
14
});
15
};
16
});
17
What I really get confused is, about trigger input event on the select event.
JavaScript
1
6
1
select: function() {
2
$timeout(function() {
3
iElement.trigger('input');
4
}, 0);
5
}
6
What is input for an event, I have never hear about it. I searched in Internet about input event but could not find something helpful.
Advertisement
Answer
A good way to think about it is like this: it’s a keyup event that filters out all keys which do not have an effect on the textual value of the input and fires when a completion is selected from a list of previously input values (thanks to @szeryf for the tip!). See this answer from stackoverflow for more details.