使用angular.js ui和bootstrap typeahead进行异步调用以检索自动搜索建议

Question

I am using angular 1.3.0 and bootstrap 3.2.0. I am trying to get data from asynchronously from my mysql database but I got some issue with bootstrap typeahead.

MY code index.html:

<input type="text" ng-model='locality' name="locality" typeahead="name for locality in getLocality($viewValue) | filter:$viewValue" typeahead-loading="loadingLocations" class="form-control size1 input-medium search-query"
    placeholder="Enter Organization name/service">
</input>

main.js file for typeahead

    $scope.getLocality = function(val) {
       console.log(val);
       var url = $rootScope.baseURL + '/api/location?locality=' + val;
       console.log(url);
       return $http.get(url, {
           params: {
               name: val,
               sensor: false
           }
       }).then(function(response) {
           var addresses = [];
           angular.forEach(response.data.resulults, function(item) {
               addresses.push(item.formatted_name);
           });
           return addresses;
       });

    };

When I was debugging this value will fine but i am not getting any auto suggestions please any one help me out of this problem.

Answer 1

It's working fine Thank u @tiblu
index.html file

<input type="text" ng-model='locality' name="locality"
                                typeahead="name for name in getLocality($viewValue)"
                                typeahead-loading="loadingLocations"
                                class="form-control size1 input-medium search-query"
                                placeholder="Enter Organization name/service">
                                </input>



    .js file    


    $scope.getLocality=function(val){
                        console.log(val);
                                    var url=$rootScope.baseURL + '/api/location?locality='+val;
                                console.log(url);
                                              return $http.get(url,{

                                                           params: {
                                                                     name: val,
                                                                     sensor: false
                                                                     }
                                                                 }).then(function(response){
                                                                    console.log(response);
                                                                    console.log(response.data); 
                                                                    var addresses=[];
                                                                           angular.forEach(response.data.data,function(item){
                                                                            addresses.push(item.name);
                                                                            //return item.formatted_name;
                                                                            console.log(response.data);
                                                                           });
                                                                          return addresses;
                                                                         /*return response.data.results.map(function(item){
                                                                           return item.formatted_address;*/
                                                                  });

                    };