如何在 Angular-material 自动完成中显示远程查询的结果？

Question

我正在使用angular-material 编写一个网站，其中我使用auto-complete。在此自动完成 (codepen here) 中，有一个函数从本地演示搜索项数组返回搜索结果，该数组（简化）如下所示：

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

我现在想编辑此代码，以便在键入每个字母后查询服务器。所以我写了 Angular 代码来查询服务器并返回一个 Promise，as instructed here:

function querySearch (query) {
    return $http.get('/ajax/user/search/' + query).then(function(data){
        console.log(data); // I've got the data here. All fine.
        return data.data;
    });
}

不幸的是，这并没有真正起作用；服务器可以正常查询，但我看到一个空的建议列表，如下所示：

有人知道我该如何解决这个问题吗？欢迎所有提示！

Answer 1

查看此处的示例并单击关闭模拟查询并禁用查询缓存 - https://material.angularjs.org/latest/#/demo/material.components.autocomplete

如果你真的希望它每次都触发并设置md-min-length="0"，请确保禁用缓存md-no-cache="false"

您只想用您的实际查询替换他们必须模拟查询的超时

function querySearch (query) {
  var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
      deferred;
  if (self.simulateQuery) {
    deferred = $q.defer();
    //repalce this
    $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
    return deferred.promise;
  } else {
    return results;
  }
}

并相应地回报你的承诺。

Answer 2

一个快速修复方法是将函数返回为：

function querySearch (query) {
    return $http.get('/ajax/user/search/' + query).success(function(data){
        console.log(data); // I've got the data here. All fine.
        return data.data;
    });
}

然后在视图中将调用更改为：

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

因此执行你现在返回的函数。

（Codepen 展示解决方案：http://codepen.io/anon/pen/qdyEBy）