Error in input with ui-bootstrap does not show the results

Question

Error in input with ui-bootstrap does not show the results

Navigation

#1 by (1 votes)

0

I'm trying to show a result in a input type autocomplete making a request get but it does not show the results ...

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.getLocation = function(val) {
    $http.get('//maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(res){
      return [].concat(res.data.results);
    });
  };

});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>


<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <input type="text" 
    ng-model="asyncSelected" 
    placeholder="Locations loaded via $http" 
    uib-typeahead="address as address.formatted_address for address in getLocation($viewValue)" 
    typeahead-loading="loadingLocations" 
    typeahead-no-results="noResults" 
    class="form-control">
</div>
  </body>
</html>

I expect a good explanation from the SOes community.

javascript html bootstrap angularjs

asked by zerokira 21.05.2018 в 16:41

source

1 answer

Problem with area.addText (char ...) JAVA Error 13 in macro: the types do not match

score 1 · Accepted Answer

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.getLocation = function(val) {
    return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(res){
      return [].concat(res.data.results);
    });
  };

});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>


<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <input type="text" 
    ng-model="asyncSelected" 
    placeholder="Locations loaded via $http" 
    uib-typeahead="address as address.formatted_address for address in getLocation($viewValue)" 
    typeahead-loading="loadingLocations" 
    typeahead-no-results="noResults" 
    class="form-control">
</div>
  </body>
</html>

Hi, you missed adding the return to your getLocation method

return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
  params: {
    address: val,
    sensor: false
  }
}).then(function(res){
  return [].concat(res.data.results);
});

Greetings