1

我正在尝试让md-autocomplete与Algolia 的 Angular 服务配合得很好。我一直坚持让下拉菜单显示从 Algolia 返回的结果。内容在控制台中，但下拉列表不会填充更新的结果。我错过了什么？

tl;博士：Plnkr

“后端”

.controller('DemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q, $log, algolia, $http, $scope) {

   var self = this;
   self.simulateQuery = false;
   self.isDisabled    = false;
   self.repos         = loadAll();
   self.querySearch   = querySearch;
   self.selectedItemChange = selectedItemChange;
   self.searchTextChange   = searchTextChange;

   // Algolia demo keys below
   var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76');
   var index = client.initIndex('contacts');
   $scope.query = '';
   $scope.hits = [];

   // Disable cache
   $scope.noCacheResults = false;


   // ******************************
   // Internal methods
   // ******************************
   /**
    * Search for repos... use $timeout to simulate
    * remote dataservice call.
    */
   function querySearch (query) {

      // This returns objects in console
      var results = self.algoliaSearch(query);

      // This returns: TypeError: Cannot read property 'then' of undefined
      // var results = query ? self.algoliaSearch( createFilterFor(query) ) : self.repos, deferred;

       return results;
   }
   function searchTextChange(text) {
     $log.info('Text changed to ' + text);
   }
   function selectedItemChange(item) {
     $log.info('Item changed to ' + JSON.stringify(item));
   }

   /**
    * Build `components` list of key/value pairs
    */
    function algoliaSearch(text) {
        try {
            index
                .search(text)
                .then(function(content) {
                    // if (content.query !== $scope.query) {
                    //     // do not take out-dated answers into account
                    //     return;
                    // }
                    $scope.hits = content.hits;

                    return content.hits.map( function (hit) {
                      hit.value = hit.name.toLowerCase();
                      $log.debug(hit);
                      return hit;
                    });

                }, function(content) {
                    console.log('Error: ' + content.message);
                });
        } catch(e) {
           $log.debug(e);
        }
    }

   function loadAll() {
     var repos = [
       {
         'name'      : 'Angular 1',
         'url'       : 'https://github.com/angular/angular.js',
         'watchers'  : '3,623',
         'forks'     : '16,175',
       }
     ];
     return repos.map( function (repo) {
       repo.value = repo.name.toLowerCase();
       return repo;
     });

   }

   /**
    * Create filter function for a query string
    */
   function createFilterFor(query) {
     var lowercaseQuery = angular.lowercase(query);
     return function filterFn(item) {
       return (item.value.indexOf(lowercaseQuery) === 0);
     };
   }
 }

“前端”

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
  <md-content layout-padding layout="column">
    <form ng-submit="$event.preventDefault()">
      <p>Use <code>&lt;md-autocomplete&gt;</code> with custom templates to show styled autocomplete results.</p>
      <md-autocomplete
          ng-disabled="ctrl.isDisabled"

          md-no-cache="ctrl.noCacheResults"

          md-selected-item="ctrl.selectedItem"
          md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
          md-search-text="ctrl.searchText"
          md-selected-item-change="ctrl.selectedItemChange(item)"

          md-items="item in ctrl.querySearch(ctrl.searchText)"

          md-item-text="item.name"
          md-min-length="0"
          placeholder="Pick an Angular repository"
          md-menu-class="autocomplete-custom-template">
        <md-item-template>
            {{item}}

          <span class="item-title">
            <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
            <span> {{item.name}} </span>
          </span>
          <span class="item-metadata">
            <span class="item-metastat">
              <strong>{{item.watchers}}</strong> watchers
            </span>
            <span class="item-metastat">
              <strong>{{item.forks}}</strong> forks
            </span>
          </span>
        </md-item-template>
      </md-autocomplete>
    </form>
  </md-content>
</div>

“阿尔戈利亚默认”

<section class="panel">
  <header class="panel-heading">
    <div class="search_box">
      <form action="#" method="get">
        <input autocomplete="off" class="autocomplete" placeholder="Start typing" type="text" spellcheck="false" id="q" ng-model="query" />
        <div class="searchbutton">
          <i class="icon-search icon-large"></i>
        </div>
      </form>
    </div>
  </header>
</section>

<h1>Results</h1>
<div class="hit" ng-repeat="hit in hits">
  <div class="attribute" ng-repeat="(attribute,v) in hit._highlightResult">
    <span>{{ attribute }}: </span>
    <span ng-bind-html="v.value"></span>
  </div>
</div>

<script type="text/javascript">
  angular
    .module('myapp', ['algoliasearch', 'ngSanitize'])
    .controller('SearchCtrl', ['$scope', 'algolia', function($scope, algolia) {
      $scope.query = '';
      $scope.hits = [];
      // Replace the following values by your ApplicationID and ApiKey.
      var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76');
      // Replace the following value by the name of the index you want to query.
      var index = client.initIndex('contacts');
      $scope.$watch('query', function() {
        index.search($scope.query, { hitsPerPage: 5 }).then(function(content) {
          if (content.query !== $scope.query) {
            // do not take out-dated answers into account
            return;
          }
          $scope.hits = content.hits;
        }, function(content) {
          console.log('Error: ' + content.message);
        });
      });
    }]);
</script>
4

1 回答 1

6

您应该返回 aPromise因为对 AlgoliaSearch 的调用是异步的：

function querySearch(query) {
  return algoliaSearch(query);
  // var results = query ? self.algoliaSearch( createFilterFor(query) ) : self.repos, deferred;
}

您可以在此处找到更新的代码：http: //plnkr.co/edit/C8fmsNRzNsXEC7InNM6a

于 2015-11-19T00:07:23.340 回答