CODEWITHSUNDEEP
javascriptangularjsmd-autocomplete
tanmayghosh2507
tanmayghosh2507

Reputation: 773

md-autocomplete dropdown not updating simultaneously with the md-search-text-change call

I show a dropdown using md-autocomplete, and also I have typeahead APIs which should get called once I start typing in the input box. The problem is that, it is calling the typeahead API and fetching the results and setting it to a variable in JS controller, but the dropdown in html shows the filtered dropdown results only if I type the next character in the input box or close and re-click on the dropdown. How to take the changes in the dropdown results as immediately as someone starts typing in? I am using md-search-text-change to get the text input and call the respective function.

HTML Code: 

<md-autocomplete flex-gt-xs md-no-cache="true"
                 required placeholder="Choose a Value"
                 md-selected-item="vm.item.value"
                 md-search-text-change="vm.searchTextChange(vm.valueSearchText)"
                 md-search-text="vm.valueSearchText"
                 md-items="value in vm.item.valueList"
                 md-item-text="value.id"
                 md-min-length="0">

JS Controller:

function searchTextChange(text) {
  service.getValueList(text).then(function (values) {
    vm.item.valueList = values;
  });
}

function getValues() {
  service.getValueList().then(function (values) {
    vm.item.valueList = values;
  });
}

So, the valueList is updated with the correct values from the API call, but I can't see the latest valueList in dropdown and instead see the immediate older values in the dropdown. Please help.

Upvotes: 0

Views: 671

Answers (1)

tritims
tritims

Reputation: 52

Try the following

HTML:

<md-autocomplete flex-gt-xs md-no-cache="true"
             required placeholder="Choose a Value"
             md-selected-item="vm.item.value"
             md-search-text-change="vm.searchTextChange(vm.valueSearchText)"
             md-search-text="vm.valueSearchText"
             md-items="value in vm.searchTextChange(vm.valueSearchText)"
             md-item-text="value.id"
             md-min-length="0">

JS Controller:

function searchTextChange(text) {
  service.getValueList(text).then(function (values) {
    return values;
 });
}

Upvotes: 0

Related Questions