Using angular.js ui and bootstrap typeahead to asynchronously call to fetch auto suggestions for search
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 am having a bootstrap typeahead problem.
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 debug this value everything will be fine, but I am not getting any auto suggestions, please help me to solve this problem.
+3
source to share
1 answer
It works great Thanks 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;*/
});
};
0
source to share