md autocomplete

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angular material autocomplete remote source</title>
    <meta content="marcusasplund.com" name="author">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta content="marcusasplund.com" name="author">
    <meta content="width=device-width, initial-scale=1" name="viewport">    
    <link data-require="leaflet@0.7.7" data-semver="0.7.7" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.min.css" rel="stylesheet"/>
    <link href="style.css" rel="stylesheet">
  </head>
  <body ng-app='myApp'>
    <div flex layout="row" ng-cloak ng-controller="DemoCtrl as ctrl" style="height:100%">
      <md-content class="md-padding" flex>
          <p>Use
            <a href="https://material.angularjs.org/latest/api/directive/mdAutocomplete"><code>&lt;md-autocomplete&gt;</code></a>
            to search for matches from remote data source.</p>
          <md-autocomplete 
              md-autoselect=true
              placeholder="What is your favorite place?"
              md-item-text="item.display"
              md-items="item in ctrl.items"
              md-menu-class="autocomplete-custom-template"
              md-min-length="2"
              md-delay="ctrl.throttle"
              md-search-text="ctrl.searchText"
              md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
              md-select-on-match=true
              md-match-case-insensitive=true
              md-selected-item-change="ctrl.selectedItemChange(item)"
              md-selected-item="ctrl.selectedItem">
            <md-item-template>
              <span class="item-title">
                <span md-highlight-flags="^i" md-highlight-text="ctrl.searchText">
                  {{item.display}}
                </span>
              </span>
            </md-item-template>
            <md-not-found>
              No match found.
            </md-not-found>
          </md-autocomplete>
          <br>
        <pre><code>
      {{ctrl.result}}
    </code></pre>
          <md-content class="md-padding" layout="column">
      <md-card>
        <md-card-content>
          <leaflet width="100%" height="500px" center="ctrl.center" ></leaflet>
        </md-card-content>
      </md-card>
  </md-content>
      </md-content>
    </div>
    <script data-require="leaflet@0.7.7" data-semver="0.7.7" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-aria.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
    <script src="app.js"></script>    
    <script>
    // leaflet init hack
    document.addEventListener("DOMContentLoaded", function() {
      setTimeout(function () {
        window.dispatchEvent(new Event('resize'));
      }, 50)
    });
  </script> 
  </body>
</html>

(function () {
  'use strict';
  angular
    .module('myApp', ['ngMaterial','leaflet-directive'])
    .controller('DemoCtrl', DemoCtrl)
    .config(function ($logProvider) {
      $logProvider.debugEnabled(false);
    });
    
  function DemoCtrl($http) {
    var vm = this;
    vm.selectedItemChange = selectedItemChange;
    vm.searchTextChange   = searchTextChange;
    vm.throttle = 300;
    vm.center = {
        lat : 0,
        lng : 0,
        zoom: 2
      };

    function selectedItemChange(item) {
      vm.result = JSON.stringify(item, null, 2);
      vm.center = {
        lat : item.lat,
        lng : item.lng,
        zoom: 15
      };
    }

    function searchTextChange(query) {
      vm.items = $http
        .get('//maps.googleapis.com/maps/api/geocode/json', {
          params: {
            address: query
          }
        })
        .then(function (response) {
          return response
            .data
            .results
            .map(function (item) {
              console.log(item);
              return {
                display: item.formatted_address,
                lat: item.geometry.location.lat,
                lng: item.geometry.location.lng,
                value: item.formatted_address
              };
            }) || [];
        }, function () {
          return [
            {
              display: 'error',
              lat: 0,
              lng: 0,
              value: ''
            }
          ];
        });
    }
  }
})();

.autocomplete-custom-template li {
  border-bottom: 1px solid rgba(0,0,0,0.15);
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal; }
.autocomplete-custom-template li:last-child {
  border-bottom-width: 0; }
.autocomplete-custom-template .item-title,
.autocomplete-custom-template .item-metadata {
  display: block;
  line-height: 2; }
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}