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

Question

I'm writing a website using angular-material in which I use the auto-complete . Within this autocomplete ( codepen here ) there is a function which returns the searchresults from a local array of demo search-items which (simplified) looks like this:

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

I now want to edit this code so that I can query the server after typing each letter. So I wrote the angular code to query the server and return a 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;
    });
}

Unfortunately this doesn't really work; the server gets queried fine, but I see an empty list of suggestions as you can see below:

Does anybody know how I can solve this issue? All tips are welcome!

Answer 1

Check out the example here and click off simulate query and disable caching of queries - https://material.angularjs.org/latest/#/demo/material.components.autocomplete

Just make sure you disable cache md-no-cache="false" if you truly want it to fire every time and set md-min-length="0"

You just want to replace the timeout they have to mock the query with your actual query

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

And return your promise accordingly.

Answer 2

One quickfix would be to just return the function as:

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

and then in the view change the call to:

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

therefore executing the function you return now.

(Codepen to showcase the solution: http://codepen.io/anon/pen/qdyEBy )