md-autocomplete with webapi call showing previous results

Question

So i'm trying to autocomplete by calling a webapi, and it's working/returning the correct data but the md-autocomplete is always showing the results from the previous webapi call, not the most recent one. So when the user enters two characters, the autocomplete drop down will not load but I'll see that the webapi successfully returned results. Then when the user enters a third character, it will show the results from when the webapi was called with two characters. It seems like return vm.vendorResults is being returned before it is loaded with the data. What am I doing wrong? Thanks!

<div ng-cloak="">
    <label for="usr">Manufacturer</label>
    <md-autocomplete ng-disabled="false"
                     md-no-cache="true"
                     md-selected-item="vm.selectedVendor"
                     md-search-text="vm.vendorSearchString"
                     md-items="vendor in vm.getVendorList2(vm.vendorSearchString)"
                     md-item-text="vendor.ve_name"
                     md-min-length="2"
                     placeholder="Select Manufacturer">
    <md-item-template>
        <span md-highlight-text="vm.vendorSearchString" md-highlight-flags="^i">{{vendor.ve_name}}</span>
    </md-item-template>
</div>

vm.getVendorList2 = function (vendorSearchText) {
    console.log('calling getvendorlist2');
    var jsonCatalogInfo = vm.cataloginfoVL();
    jsonCatalogInfo.ve_name = vendorSearchText;
    console.log(vendorSearchText);
    $.get(vm.memportalUrl + "securewebapi/GetVendorList/?jsonCatalogInfo=" + JSON.stringify(jsonCatalogInfo))
    .then(function (result) {
        console.log('success calling GetVendorList');            
        var jsonResult = JSON.parse(result);
        vm.vendorResults = JSON.parse(jsonResult);
        console.log(vm.vendorResults);
        return vm.vendorResults;
    });
}

user4523 · Answer 1 · 2017-07-10T21:50:57.300

I fixed it by changing the method to be synchronous but I'm not sure if this is an acceptable fix?

 $.ajax({
        url: vm.memportalUrl + "securewebapi/GetVendorList/?jsonCatalogInfo=" + JSON.stringify(jsonCatalogInfo),
        success: function (result) {
            console.log('success calling GetVendorList');
            //defer.resolve(result);
            var jsonResult = JSON.parse(result);
            vm.vendorResults = JSON.parse(jsonResult);
            console.log(vm.vendorResults);
            //return vm.vendorResults;
        },
        async: false
    });
    return vm.vendorResults;

Edit: Just wanted to update this and say that another developer included angular-block-ui in the application which was causing the issue by blocking the entire UI during every asynchronous call.

md-autocomplete with webapi call showing previous results

1 Answers1