AngularJS Example:
HTML
<div ng-app='myApp' ng-controller=MyCtrl>
<input type="text" ng-class="{loading: searching}" ng-model="leNom">
<ul ng-repeat="e in suggestions">
<li>{{e.displayName}}</li>
</ul>
<div ng-if="partialResults">Votre recherche est limitée. Pour les autres résultats, veuillez affiner la recherche.</div>
</div>
CSS
.loading {
background: url('//wsgroups.univ-paris1.fr/web-widget/ui-anim_basic_16x16.gif') no-repeat scroll right center #FFF !important;
}
JavaScript
(function () {
"use strict";
var app = angular.module('myApp', []);
app.factory('searchUser', function ($http) {
var searchUserURL = 'http://wsgroups.univ-paris1.fr/searchUser';
return function(token, maxRows) {
return $http.jsonp(searchUserURL + "?callback=JSON_CALLBACK&maxRows=" + maxRows + "&token=" + encodeURIComponent(token));
}
});
app.controller('MyCtrl', function ($scope, searchUser) {
$scope.$watch('leNom', suggest);
function suggest(token) {
var maxRows = 10;
$scope.searching = true;
searchUser(token, maxRows).success(function (l) {
$scope.suggestions = l;
$scope.partialResults = $scope.leNom.length < 4 || l.length == maxRows;
}).finally(function () {
$scope.searching = false
});
};
});
}());