Autocomplete textbox options from JSON

Question

This answer is close to what I'm trying to do. I'm also branching from its original Plunker to this new Plunker

The original plunker has a text box that auto-completes where the auto-complete options are hard coded in a list.

I've added a service to the new plunker that gets some information about stackoverflow badges in JSON. How can I have the auto-complete use the JSON data to provide a list of badge names for the auto-complete options?

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <script data-require="angular.js@1.3.9" 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){

          badge_names = how do I make a list of badge names from badges.success?;
          $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>

score 2 · Accepted Answer · answered Oct 03 '15 at 05:01

Here you go, checkout this plunk: http://plnkr.co/edit/IgPyrCdFqT1pn53PIqSc. It is quite simple and should be easily understandable. There probably might be better optimized ways of achieving this, than what I've done. I'm pasting the code here as well.

Javascript

<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', ['$scope', 'badges', function($scope, badges){

      badgeNames = [];
      badges.then(function(response){

        for(var i=0; i < response.data.items.length; i++){
          badgeNames[i] = response.data.items[i].name;
        }

      });

      $scope.availableTags = badgeNames;
      $scope.complete = function () {
        console.log('running');
        $( "#tags" ).autocomplete({
          source: $scope.availableTags
        });
      };
}]);

HTML

<body ng-app="app" ng-controller="ctrl">
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" ng-keyup="complete()"/>
    </div>
</body>

You'll see in my code above that I traverse through the JSON to make an array consisting only of the names of badges. Ideally, that should be done via the API using filters but I wasn't familiar with the Stack Overflow API which is why, I did it that way.

Thanks. The actual project I'm working on isn't using the Stack Overflow API, so this works perfectly. — cameron-f, Oct 03 '15 at 21:38

Autocomplete textbox options from JSON

1 Answers1