CODEWITHSUNDEEP
javascriptangularjscallbacktypeahead.js
Peter Huang
Peter Huang

Reputation: 1188

AngularJS Typeahead callback function

I know there is something wrong related to this callback function. But I'm not sure what is the best way to fix this.

I have a resource:

.factory("AutoCompleteResource", function ($http) {
    return {
        getAutoComplete: function (searchTerm) {
            $http.get('/cdeCompletion/' + searchTerm, {}).then(function (response) {
                response.data;
            });
        }
    }
})

this is the controller:

 $scope.getAutoComplete = function (searchTerm) {
    AutoCompleteResource.getAutoComplete(searchTerm);
}

this is the html view:

<input name="searchTerms" id="searchTerms" type="text" class="form-control" ng-model="ftsearch"
                       ng-maxlength="500" placeholder="Search Common Data Elements"
                       typeahead-wait-ms="500" typeahead-min-length="3"
                       typeahead="searchQuery for searchQuery in getAutoComplete($viewValue) | filter:$viewValue | limitTo:8"
                       typeahead-focus-first="false" typeahead-on-select="gotoSearch()">

What is the best way to fix the error here? Thanks!

Upvotes: 1

Views: 231

Answers (2)

sneha shah
sneha shah

Reputation: 75

You need to call in bs-options

<input bs-typeahead id="txtJobNumber" type="text" class="form-control typeahead"
                   typeahead-wait-ms="10" typeahead-append-to-body="true"
                   ng-model="JobNumber" bs-on-select="OnJobSelected"
                   bs-options="item.JobNumber for item in getMatchedJobNumbers($viewValue)" 
                   data-limit="Infinity" data-min-length="3" data-html="1" data-auto-select="true" />

Add this to call your Api when user types in typeahead input box

$scope.getMatchedJobNumbers= function (value) {

        
    }

Upvotes: 1

PSL
PSL

Reputation: 123739

You need to return the promise to the typeahead as it can handle promise and auto resolve it for data, i.e

.factory("AutoCompleteResource", function ($http) {
    return {
        getAutoComplete: function (searchTerm) {
          //Return here
           return $http.get('/cdeCompletion/' + searchTerm, {}).then(function (response) {
                return response.data; //return here
            });
        }
    }
});

and

$scope.getAutoComplete = function (searchTerm) {
    //Return here
    return AutoCompleteResource.getAutoComplete(searchTerm);
}

Upvotes: 1

Related Questions