Autocomplete Places

Using Angular to get fancy autocompletion from scratch. Useful for the prototype and in production.

by kshep92

HTML

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-sanitize.min.js"></script>
<div ng-app="app">
  <div ng-controller="Ctrl">
      Search for a place <input ng-model="search" placeholder="Example: Deigo Martin" /> <span class="place" ng-show="place" ng-bind="place.formatted_address"></span>
      <ul ng-show="textPresent()">
          <li ng-repeat="place in places | filter:search" ng-bind-html="place.formatted_address | searchfilter:search" ng-click="setPlace(place)"></li>
      </ul>
  </div>
</div>

CSS

.super-class {
   font-weight: bold;
}

.place {
  display: inline-block;
  padding: 6px;
  border-radius: 3px;
  background-color: #5E7AC2;
  border: 1px solid #ccc;
}

JavaScript

//https://docs.angularjs.org/guide/filter
//https://docs.angularjs.org/tutorial/step_09
//https://docs.angularjs.org/api/ng/directive/ngBindHtml
angular
    .module('app', ['ngSanitize'])
    .controller('Ctrl', function($scope){
        $scope.places = [        
        {id: 1, formatted_address: 'Carenage, Diego Martin'},
        {id: 2, formatted_address: 'Diamond Vale, Diego Martin'},
        {id: 3, formatted_address: 'La Puerta, Diego Martin'},
        {id: 4, formatted_address: 'Victoria Gardens, Diego Martin'}
        ];
        $scope.textPresent = function() { return $scope.search != undefined && $scope.search != ''; };
        $scope.setPlace = function(place) { $scope.place = place; $scope.search = ''; };
    })
    .filter('searchfilter', function() {
        return function (input, query) {
            return input.replace(RegExp('('+ query + ')', 'gi'), '<span class="super-class">$1</span>');
        }
    });