4

I'm using md-autocomplete, in that md-items which is not updating the response list properly which is obtained from the Service Host - Ajax Call.

HTML Source Code

<md-autocomplete flex required
    md-input-name="autocompleteField"
    md-no-cache="true"
    md-input-minlength="3"
    md-input-maxlength="18"
    md-selected-item="SelectedItem"
    md-search-text="searchText"
    md-items="item in querySearch(searchText)"
    md-item-text="item.DisplayName" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.ID}} </span>
            <span> - </span>
            <span md-highlight-text="searchText"  md-highlight-flags="^i"> {{item.Description}} </span>
        </span>
    </md-item-template>
</md-autocomplete>

AngularJS Script

//bind the autocomplete list when text change
function querySearch(query) {
    var results = [];
    $scope.searchText = $scope.searchText.trim();
    if (query.length >=3) {
        results = LoadAutocomplete(query);
    }
    return results;
}

//load the list from the service call
function LoadCPTAutocomplete(id) {
    TestCalculatorService.searchAutocomplete(id).then(function (result) {
        if (result.data != null) {
            $scope.iList = result.data;
        } else {
            $scope.iList = [];
        }
    });
    return $scope.iList;
}

I'm getting the autocomplete list from the Service Host. I'm getting the response properly, but it does not update in the UI properly.

Screen Shot 1: Screen Shot 1

Here I'm searching for 8224 but it shows the result for 822. I debugged the issue in Firebug, see the above Screen shot it shows, the request was sent for the search term 8224 and I got the response of two matching items as a JSON Object, which is shown in the below Screen Shot 2

Response JSON - 2 Objects

In UI, it shows the result 82232, 82247, 82248, 82270. But actually Service return is 82247 and 82248.

How to update the Item-source in UI for Angular Material md-autocomplete? Kindly assist me.

Supportive Question was posted in the following link Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

Community
  • 1
  • 1
B.Balamanigandan
  • 4,713
  • 11
  • 68
  • 130
  • well.. yeah, `searchAutocomplete` is asynchronous, so you're returning the value stored in `$scope.iList` before `searchAutocomplete` has finished. `querySearch` is either returning undefined or an empty array on first run, then on second run it'l show the value for the first run because it has completed by that time, thus updating `$scope.iList`. I'd suggest finding a way to do this without using queryResult directly in the view, instead have the view look at a scope var. – Kevin B Feb 25 '16 at 18:24
  • such as, `"item in iList"` (though that alone isn't going to fix this problem entirely, you still have to somehow call queryResult when the searchText changes) – Kevin B Feb 25 '16 at 18:30
  • @KevinB I posted a question http://stackoverflow.com/questions/35646077/scope-apply-raise-error-on-ajax-call-error-rootscopeinprog - there I used the approach as said by you, still I'm facing the issue. So, I googled alot and find a post http://stackoverflow.com/questions/21127709/angular-controller-scope-not-updating-after-jquery-ajax-call in that they are suggesting $scope.$apply, but the $scope.$apply raises an error. If I use direct assignment then it gives the same output as like this post. – B.Balamanigandan Feb 26 '16 at 07:59
  • Try moving return $scope.iList inside the callback. Otherwise the function will return before the callback is received. – Sambhav Sharma Feb 26 '16 at 08:34
  • @SambhavSharma I tried. But it also gives the same output. – B.Balamanigandan Feb 26 '16 at 10:13

1 Answers1

2

The Answer Marked in the following post is Correct as per the requirement. $http issue - Values can't be returned before a promise is resolved in md-autocomplete Angular Material

  • .then() - full power of the promise API but slightly more verbose
  • .success() - doesn't return a promise but offers slightly more convenient syntax

Don't use .success(), use .then to get the updated result in the UI...

Community
  • 1
  • 1