从远程 url 获取数据的 angucomplete-alt 问题答案

【问题标题】：angucomplete-alt issue getting data from remote url从远程 url 获取数据的 angucomplete-alt 问题
【发布时间】：2015-01-03 18:58:53
【问题描述】：

我正在使用 angucomplete-alt 指令从 get 请求中创建一个自动完成列表。

当我使用 github api 时

<div angucomplete-alt id="ex5" placeholder="Search projects" pause="500" selected-object="selectedProject" remote-url="https://api.github.com/search/repositories?q=" remote-url-data-field="items" search-fields="name" title-field="name" minlength="2" input-class="form-control form-control-small" match-class="highlight"></div>

它返回没有问题的结果。

当我尝试使用 jsonplaceholder 示例 api 时

<div angucomplete-alt id="ex5" placeholder="Search posts" pause="500" selected-object="selectedProject" remote-url="http://jsonplaceholder.typicode.com/posts/" search-fields="id" title-field="title" minlength="1" input-class="form-control form-control-small" match-class="highlight"></div>

我无法返回结果，但是当我查看控制台时，它正在加载内容（示例输入 22），但我无法在自动完成列表中显示任何内容。

我能看到的唯一区别是结构。我已经从 jsonplaceholder 中删除了 remote-url-data-field="items"，我没有收到任何错误，我在这里可能做错了什么？

已将工作 github 示例注释掉。

http://codepen.io/anon/pen/pBfog

    <html class="no-js" id="ng-app" ng-app="app">
      <head>
        <title>Angucomplete Alt: Autocomplete Directive for AngularJS</title>
        <meta name='viewport' content='width=device-width,initial-scale=1'>
      </head>
      <body ng-controller="MainController">
        <div>
          <div class="large-padded-row">
            <div class="padded-row">
    <!--
              <div angucomplete-alt id="ex5" placeholder="Search projects" pause="500" selected-object="selectedProject" remote-url="https://api.github.com/search/repositories?q=" remote-url-data-field="items" search-fields="name" title-field="name" minlength="2" input-class="form-control form-control-small"
            match-class="highlight"></div>
    -->
              <div angucomplete-alt id="ex5" placeholder="Search posts" pause="500" selected-object="selectedProject" remote-url="http://jsonplaceholder.typicode.com/posts/" search-fields="id" title-field="title" minlength="1" input-class="form-control form-control-small" match-class="highlight"></div>
            </div>
            <div class="result">
              <div class="" ng-show="selectedProject">
                Repository: <span class="bold-span">{{selectedProject.originalObject.git_url}}</span>
              </div>
            </div>
          </div>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-touch.min.js"></script>
        <script src="js/libs/angucomplete-alt.js"></script>
        <script>
          var app = angular.module('app', ["ngTouch", "angucomplete-alt"]);

          app.controller('MainController', ['$scope', '$http',
            function MainController($scope, $http) {
            }
          ]); 
          </script>
        </div>
      </body>
    </html>

【问题讨论】：

标签： javascript html angularjs autocomplete angularjs-directive

【解决方案1】：

来自 jsonplaceholder 的响应没有根对象。这就是为什么。 Angucomplete-alt 不支持没有根对象的 JSON 对象。

【讨论】：

感谢您提供此信息，我将确保我的真实数据结构符合要求。