angular.js ui + bootstrap typeahead + asynchronous call

Question

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?

Answer 1

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