Current best way to implement a typeahead in angularjs

Question

I need to implement typeahead functionality pulling suggestions from an $http request, with angularjs. I am using Bootstrap 3.1. I haven't been able to get any suggested implementations to work. Most seem to be using Bootstrap 2. There are many 3rd party solutions out there none of which I've been able to get to work, including ui-bootstrap, typeahead.js (from twitter), and other suggestions. What is the current, easiest way to do this? Everything I find that's only 6 months old is already outdated it seems.

I'm trying the instructions listed here: http://angular-ui.github.io/bootstrap/#/getting_started

My view code:

<label for="originLocation" class="control-label">Origin Location</label>
<input id="originLocation" class="form-control"
                   ng-model="OriginLocation"
                   typeahead="suggestion for suggestion in getOriginSuggestions(OriginType, $viewValue)"
                   placeholder="Enter Location">

My controller:

    $scope.getOriginSuggestions = function (locationType, phrase) {
        locationRepository.searchByType(locationType, phrase)
            .then(function (response) {
                var locations = [];
                angular.forEach(response.data, function (item) {
                    locations.push(item.LongDescription);
                })
                return locations;
        });

My controller is being hit, and I do get locations populated, but I never see the typedown behavior. Is this because the typeahead attribute doesn't work anymore in bootstrap 3.1?

Answer 1

Although I don't know what your locationRepository looks like, it appears it returns a promise, because you're then-ing it. In this then you return the location array.

But you're forgetting to return the promise at

$scope.getOriginSuggestions = function (locationType, phrase) {
        locationRepository.searchByType(locationType, phrase)
        // (...)

You'll need to return it. ( As they do in the example )

$scope.getOriginSuggestions = function (locationType, phrase) {
        return locationRepository.searchByType(locationType, phrase)
        // (...)