This answer is similar to my current project. I am building upon the original Plunker and creating a new Plunker
The original plunker contains a text box with autocomplete functionality using hardcoded options in a list.
In the new plunker, I have implemented a service that fetches information about Stack Overflow badges in JSON format. How can I modify the autocomplete feature to display badge names based on this JSON data?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2f20293b222f3c60243d0e7f607d6077">[email protected]</a>" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
var app=angular.module('app',[]);
app.factory('badges', ['$http', function($http) {
return $http.get('https://api.stackexchange.com/2.2/badges?page=1&order=desc&sort=rank&site=stackoverflow')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
app.controller('ctrl', ['badges', function($scope, badges){
// How do I extract a list of badge names from badges.success?
badge_names = ;
$scope.availableTags = badge_names;
});
$scope.complete=function(){
$( "#tags" ).autocomplete({
source: $scope.availableTags
});
}
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" ng-keyup="complete()"/>
</div>
</body>
</html>