5

I'm using typeahead with the angular.js directive but my function to populate the autocomplete makes an asynchronous call and I can't return it to populate the autocomplete. Is there anyway to make it work with this asynchronous call?

1 Answer 1

10

Can I assume that you are using the typeahead of Bootstrap 2.x ?

If so, in the documentation, the description of the source field of typeahead()'s options is this:

The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.

You can definitely pass in an async function as the source attr. The source function could be something like:

function someFunction(query, process) {
  someAsyncCall(...query or so... , function(res) { // success callback
    process(res);
  }, function(err) {                                // error callback
    process(null);
  });
}

Update:

If you are using Angular Bootstrap's typeahead, it should be even easier. According to Angular Bootstrap's docs(http://angular-ui.github.io/bootstrap/), you can just return a promise for the typeahead function. Some example from the docs:

$scope.getLocation = function(val) {
  return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
    params: {
      address: val,
      sensor: false
    }
  }).then(function(res){
    var addresses = [];
    angular.forEach(res.data.results, function(item){
      addresses.push(item.formatted_address);
    });
    return addresses;
  });
};

A simpler one could be:

$scope.getSomething= function(query) {
  var promise = $http.get('...some url...', {
    params: {
      queryName: query
    }
  });
  return promise;
};

Or you can build your own promise:

$scope.getSomething= function(query) {
  var deferred = $q.defer();
  someAsyncCall(...query or so... , function(res) { // success callback
    deferred.resolve(res);
  }, function(err) {                                // error callback
    deferred.reject(err);
  });
  return deferred.promise;
};

Actually, many services like $http are just returning promises when you call them. More about promise in AngularJS: https://docs.angularjs.org/api/ng/service/$q

Sign up to request clarification or add additional context in comments.

3 Comments

Actually I'm doing this: <input type="text" ng-model="selectedCard" placeholder="Card Name" typeahead="cardName for cardName in cardSearch($viewValue)" typeahead-loading="loading" class="form-control" typeahead-min-length="3" typeahead-wait-ms="400">
@LuizGuilherme That's even easier. According to Angular Bootstrap's doc, you can just return a promise if you want to do async call.
Sorry, but how can I do that? What would be a promise?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.