Question

我正在使用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 sample 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>

Answer 1

jsonplaceholder的响应没有根对象。这就是原因。 Angucomplete-alt不支持没有root对象的JSON对象。

angucomplete-alt问题从远程URL获取数据

1 个答案: