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

Question

我正在使用 angular-material in which I use the auto-complete. Within this autocomplete (codepen here 编写网站）有一个函数 returns 从本地演示搜索项数组中搜索结果，（简化）如下所示：

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

我现在想编辑这段代码，这样我就可以在输入每个字母后查询服务器。所以我写了 angular 代码来查询服务器和 return 一个承诺，:

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

一个快速修复方法是 return 函数为：

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)()"

因此现在执行您 return 的功能。

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

Answer 2

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

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

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

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

并且return你的承诺。

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

How to show results from remote query in Angular-material autocomplete?

javascript

asynchronous

callback

promise

angularjs