CODEWITHSUNDEEP
angularjsapiasynchronoustypeahead
aclspy
aclspy

Reputation: 61

Populating typeahead with api call results

So my ideal functionality for this input search bar is to fetch all results from the database that matches whatever the user is typing in after a debounce.

I am getting back an array and the typeahead is also working and showing the data properly.

However, the api is always querying for the previous value and now whatever is currently inside the input.

So for example if the value I want to search for is "Clock":

input value = "";

If I type "Clock", the network shows that the api is fetching for "".

If I add one more letter after "Clock", like "Clocks", the network is showing it make a api fetch for "Clock".

This is the function that makes makes the get request and returns an array which is used to populate the typeahead.

    $scope.getDynamicSearchCompanies = function(val) {
      return $scope.Company.query({
        limit: 16,
        keyword: val
      }).$promise.then(function(res) {
        return res.companies;
      })
      .catch(function(err) {
        throw err;
      })
    }

<input 
    type="text" 
    placeholder="Company name or JNXS code" 
    ng-model="filter.company" 
    ng-model-options="{ debounce: 250 }" 
    class="form form-control" 
    uib-typeahead="company as (company.name + ' - ' + company.jinx_company_id + (!company.is_active ? ' (inactive)' : '') ) for company in getDynamicSearchCompanies(filter.company) | limitTo:16" 
    autocomplete="nope"
>

Upvotes: 1

Views: 556

Answers (1)

Bill P
Bill P

Reputation: 3618

If you replace this:

getDynamicSearchCompanies(filter.company)

with this:

getDynamicSearchCompanies($viewValue)

it will fix your problem. You can read the official documentation here link and the official plunker, which includes a same case with yours plunker

Upvotes: 1

Related Questions