autocomplete: response after Ajax call does not update dropdown list

[alphazhe]

I am giving ajax call in md-search-text-changed. So every time text is changed ajax call is done. But ajax takes time to give response and before even coming response it shows no data found and when response comes it does not get updated in dropdown even if array provided in md-items is updated. I tried different methods to make ajax call even in md-items but it doesn't work. Then i gave md-delay of 5 sec then it rendered result but that is of previous search query. It does not update result for latest search query.

Can you at least show me proper working example of autocomplete with ajax call in md-search-text-changed so that I'll get idea where I am going wrong or it's issue of md-autocomplete.

[alphazhe]

Is there any way to show dropdown only when response is received?

[alphazhe]

I got it .. I wasn't returning promise correctly that is the reason why I am not getting results properly. Now it is working perfectly fine.

[woodl3y]

Hi @alphazhe , I'm having the exact same issue, would you mind posting your working code ?
Here's my markup and js:

<md-autocomplete md-no-cache="true" placeholder="Search for client" 
md-selected-item="vm.client" md-search-text="vm.searchText" md-items="item in vm.clients" 
md-search-text-change="vm.searchClients(vm.searchText)" md-item-text="item.name" 
md-min-length="2" md-floating-label="Client">
    <md-item-template>
        <span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{item.name}}</span>
    </md-item-template>
</md-autocomplete>

this.searchClients = function(searchText) {
    var deferred = _this.$qService.defer();
    _this.dataService.searchClients(searchText).then(function(results) {
        _this.clients = results.data;
        deferred.resolve(results.data);
    });
    return deferred.promise;
};

And my data service:

this.searchClients = function(searchText) {
    var config = {
        url: "/api/Clients?searchText=" + searchText,
        method: "GET",
        headers: {
            'Content-Type': "application/json; charset=utf-8"
        }
    };
    return _this.$http(config);
};

[robohal]

Having the same issue. autocomplete list only updates for the previous query. ie- if i have a min character limit before query of 3, and i type 'cli' nothing happens. and when i type 'clin' it returns a list of results for 'cli'. the response from nominatum is obviously coming in after the list updates, but not sure how to fix this. js and html below. help would be much appreciated as i have been banging my head on the wall with this for ages.

<div ng-cloak id="searchBox">
  <md-content class="md-padding" style="background-color:cornflowerblue">
    <form>
      <md-autocomplete
          md-no-cache="noCache"
          md-search-text-change="nominatimSearch()"
          md-search-text="searchText"
          md-items="place in result1"
          md-delay="0"
          md-min-length="3"
          placeholder="Place Name">
        <md-item-template>
          <span md-highlight-text="searchTextNumber">{{place.display_name}}</span>
        </md-item-template>
      </md-autocomplete>
      </form>
  </md-content>
</div>

$scope.nominatimSearch = function()  {
      if ($scope.searchText.length > 2) {
      // var deferred = $q.defer();
      console.log('searching for place');
        // $scope.googleAnalytics();
        $http({
          method: 'get',
          url: 'http://nominatim.openstreetmap.org/search?q='+$scope.searchText+'&format=json&class=place&addressdetails=1'
        })
      .then(function successCallback(response) {
        $scope.result1 = response.data;
        console.log($scope.result1);
        // return deferred.promise;
      }, function errorCallback(response) {"sorry charlie...";
          return $q.reject(response.data);
        });
      } else {
        $scope.result1 = []
      }
    };

+1

[eflechakrama]

+1

[costerik]

Use md-no-cache to invoke the search handler every time user types value in second autocomplete.

[j-ramirez-bi4group]

+1

[thiagorossener]

+1

[kavuri]

+1

[ThomasBurleson]

Reopened based on community votes.