Angular UI typeahead drop down does not appear

Question

I'm using Angular UI's typeahead in combination with Web Api to load results from a search. My Angular is version 1.2.2 and bootstrap is 3.1.0. I should mention that I'm using typescript as well.

When I type into the search box I expect drop down menu with suggestions to fall down from the input. When I check the console I see my returned data, problem is that there is no drop down menu appearing to display it.

Here is my HTML + angular directives:

<div class="input-group">
                <input type="text" class="form-control" placeholder="Search" ng-model="selected"
                       data-typeahead="searchResult as searchResult for searchResult in search($viewValue) | filter:$viewValue" >
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit" ng-click="search(Text)"><i class=" glyphicon glyphicon-search"></i></button>
                </div>
            </div>

Here is my js function located in my controller:

$scope.search = function (criteria) {
                    controller.dataService.search($scope.employeeId, criteria, function (data) {
                        $scope.searchResult = data;
                });

Here is the search function in my data service.

export interface ICommonDataService extends IBaseDataService {
    search(employeeId: string, criteria: string, successCallback: (data: SearchResult) => any);
}

dataservice.ts information:

export class DataServicBase {
    public httpService: ng.IHttpService;
    public serviceBase = '/services/api';

    public static $inject = [
        '$http'
    ];

    constructor($http: any) {
        this.httpService = $http;
    }
}

    export class CommonDataService extends DataServicBase implements ICommonDataService {
    public serviceUrl = this.serviceBase + '/common';

    search(employeeId: string, criteria: string, successCallback: (data: SearchResult) => any) {
        this.httpService.get(this.serviceUrl + '/' + employeeId + '/search/' + criteria)
            .success(function (data) {
                successCallback(data);
            });
    }
}

This is what SearchResult looks like:

// Class
export class SearchResult {
    // Constructor
    constructor(
        public Employees: Employee[],
        public Filters: Employee[],
        public Projects: Project[]
        ) {
    }
}

Error i get is this:

Error: matches is undefined
.link/getMatchesAsync/<@https://web.plank.local/Scripts/ui-bootstrap-tpls-0.10.0.js:3186
qFactory/defer/deferred.promise.then/wrappedCallback@https://web.plank.local/scripts/angular.js:10655
qFactory/defer/deferred.promise.then/wrappedCallback@https://web.plank.local/scripts/angular.js:10655
qFactory/ref/<.then/<@https://web.plank.local/scripts/angular.js:10741
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://web.plank.local/scripts/angular.js:11634
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://web.plank.local/scripts/angular.js:11479
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://web.plank.local/scripts/angular.js:11740
textInputType/listener@https://web.plank.local/scripts/angular.js:15739
jQuery.event.dispatch@https://web.plank.local/scripts/jquery-2.1.0.js:4371
jQuery.event.add/elemData.handle@https://web.plank.local/scripts/jquery-2.1.0.js:4057
aM@https://cdn.qbaka.net/reporting.js:78

https://web.plank.local/scripts/angular.js
Line 9159

Answer 1

The main issue is that the list of data that you want your typeahead to work on is not a list (or not being populated). Looks to me that your function search in the controller should return the data, whereas it is just a promise. You could try a return of the data, and to make it a bit more robust you could add a limitToFilter. Instead of placing it in the shared scope.searchResult which is not being picked up at all by your typeahead.