JSFiddle - React, Tailwind, and code Playground

by HaJIuBauKa

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<div ng-controller="TypeaheadCtrl">
    <h4>Google Geocode</h4>
    <pre>Адрес: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Введите адрес" typeahead="address for address in getLocation($viewValue) | filter:$viewValue" typeahead-loading="loadingLocations" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>

JavaScript

angular.module('typeaheadApp', ['ui.bootstrap']).controller('TypeaheadCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false,
          language: 'ru',
          components: 'country:ru|administrative_area:Moscow'
      }
    }).then(function(res){
      var addresses = [];
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
      return addresses;
    });
  };
}]);