javascript - 如何在 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-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;
  }
}

并相应地返回你的 promise 。