Question

This答案接近我正在尝试做的事情。我也是从original Plunker分支到此new Plunker

原始的plunker有一个文本框，可以自动完成自动完成选项在列表中进行硬编码的位置。

我已经为新的plunker添加了一个服务，它获取了有关JSON中stackoverflow标记的一些信息。如何自动完成使用JSON数据为自动完成选项提供徽章名称列表？

<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>

Answer 1

在这里，请查看此插件：http://plnkr.co/edit/IgPyrCdFqT1pn53PIqSc。这很简单，应该很容易理解。与我所做的相比，可能有更好的实现方法。我也在这里粘贴代码。

<强>的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>

您将在上面的代码中看到我遍历JSON以创建一个仅包含徽章名称的数组。理想情况下，这应该通过使用过滤器的API完成，但我不熟悉Stack Overflow API，这就是为什么我这样做的。

从JSON自动填充文本框选项

1 个答案: