├── bower.json
├── examples
    ├── advanced.css
    ├── advanced.js
    └── advanced.html
├── README.md
└── src
    └── ngAutocomplete.js


/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ngAutocomplete",
3 |   "version": "1.0.0",
4 |   "main": "src/ngAutocomplete.js",
5 |   "dependencies": {
6 |     "angular": ">=1.2.0"
7 |   }
8 | }


--------------------------------------------------------------------------------
/examples/advanced.css:
--------------------------------------------------------------------------------
 1 | #form {
 2 | 
 3 |     margin-left: 100px;
 4 |     width: 500px
 5 | }
 6 | 
 7 | .indent {
 8 | 
 9 |     margin-left: 50px;
10 | }
11 | 
12 | .move-down {
13 |     margin-top: 100px;
14 | }


--------------------------------------------------------------------------------
/examples/advanced.js:
--------------------------------------------------------------------------------
 1 | angular.module( "Test", ['ngAutocomplete'])
 2 |   .controller("TestCtrl",function ($scope) {
 3 | 
 4 |     $scope.result = ''
 5 | //    $scope.details = ''
 6 |     $scope.options = {};
 7 | 
 8 |     $scope.form = {
 9 |       type: 'geocode',
10 |       bounds: {SWLat: 49, SWLng: -97, NELat: 50, NELng: -96},
11 |       country: 'ca',
12 |       typesEnabled: false,
13 |       boundsEnabled: false,
14 |       componentEnabled: false,
15 |       watchEnter: true
16 |     }
17 | 
18 |     //watch form for changes
19 |     $scope.watchForm = function () {
20 |       return $scope.form
21 |     };
22 |     $scope.$watch($scope.watchForm, function () {
23 |       $scope.checkForm()
24 |     }, true);
25 | 
26 | 
27 |     //set options from form selections
28 |     $scope.checkForm = function() {
29 | 
30 |       $scope.options = {};
31 | 
32 |       $scope.options.watchEnter = $scope.form.watchEnter
33 | 
34 |       if ($scope.form.typesEnabled) {
35 |         $scope.options.types = $scope.form.type
36 |       }
37 |       if ($scope.form.boundsEnabled) {
38 | 
39 |         var SW = new google.maps.LatLng($scope.form.bounds.SWLat, $scope.form.bounds.SWLng)
40 |         var NE = new google.maps.LatLng($scope.form.bounds.NELat, $scope.form.bounds.NELng)
41 |         var bounds = new google.maps.LatLngBounds(SW, NE);
42 |         $scope.options.bounds = bounds
43 | 
44 |       }
45 |       if ($scope.form.componentEnabled) {
46 |         $scope.options.country = $scope.form.country
47 |       }
48 |     };
49 | 
50 |   });
51 | 
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ng-Autocomplete
 2 | 
 3 | A simple directive for adding google places autocomplete to a textbox element. 
 4 | 
 5 | Updated to now use ng-model, should work much better in forms. Can now set an initial value using ng-model. Using the ng-model to set the textbox value does not trigger the autocomplete query.
 6 | 
 7 | Tested with angularjs-1.2.4
 8 | 
 9 | Uses optional directive parameters, so it won't work with <1.2. If people are interested I'll release a <1.2 version.
10 | 
11 | ## Examples
12 | 
13 | + [Example Plunkers - Simple Usage](http://plnkr.co/edit/GE34ojss9xMGm0024FvM?p=preview)
14 | 
15 | + [Example Plunkers - Advanced Usage](http://plnkr.co/edit/GF3nM3XfYX9El2w11pGo?p=preview)
16 | 
17 | ## Usage
18 | 
19 | Include the required libraries 
20 | ```html
21 | <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
22 | ```
23 | 
24 | Declare a dependency on the `ngAutocomplete` module
25 | ``` javascript
26 | var app = angular.module('myModule', ['ngAutocomplete']);
27 | ```
28 | 
29 | Add the directive to a textbox
30 | 
31 | ``` javascript
32 |     <input type="text"  ng-autocomplete ng-model="autocomplete" options="options" details="details"/>
33 | ```
34 | 
35 | ## Documentation
36 | 
37 | + ng-model - autocomplete textbox value
38 | 
39 | + details - more detailed autocomplete result, includes address parts, latlng, etc. (Optional)
40 | 
41 | + options - configuration for the autocomplete (Optional)
42 | 
43 |     + types: type,        String, values can be 'geocode', 'establishment', '(regions)', or '(cities)'
44 | 	+ bounds: bounds,     Google maps LatLngBounds Object, biases results to bounds, but may return results outside these bounds
45 | 	+ country: country    String, ISO 3166-1 Alpha-2 compatible country code. examples; 'ca', 'us', 'gb'
46 |     + watchEnter:         Boolean, true; on Enter select top autocomplete result. false(default); enter ends autocomplete  
47 | 
48 | example: 
49 | ``` javascript
50 | options = {
51 | types: '(cities)',
52 | country: 'ca'
53 | }
54 | ```
55 | 
56 | google places autocomplete info: https://developers.google.com/maps/documentation/javascript/places
57 | 
58 | ## Author
59 | 
60 | **Will Palahnuk** (http://github.com/wpalahnuk)
61 | 
62 | ## Credits
63 | 
64 | google places autocomplete https://developers.google.com/maps/documentation/javascript/places
65 | 
66 | ## Copyright and license
67 | 
68 |     The MIT License
69 | 
70 | 	Copyright (c) 2014 Will Palahnuk
71 | 
72 | 	Permission is hereby granted, free of charge, to any person obtaining a copy
73 | 	of this software and associated documentation files (the "Software"), to deal
74 | 	in the Software without restriction, including without limitation the rights
75 | 	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
76 | 	copies of the Software, and to permit persons to whom the Software is
77 | 	furnished to do so, subject to the following conditions:
78 | 
79 | 	The above copyright notice and this permission notice shall be included in
80 | 	all copies or substantial portions of the Software.
81 | 
82 | 	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
83 | 	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
84 | 	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
85 | 	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
86 | 	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
87 | 	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
88 | 	THE SOFTWARE.
89 | 


--------------------------------------------------------------------------------
/examples/advanced.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html ng-app="Test">
  3 | <head>
  4 |   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5 | 
  6 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  7 |   <link rel="stylesheet" type="text/css"href="/assets/examples/advanced.css">
  8 | 
  9 | </head>
 10 | 
 11 | <body>
 12 | 
 13 | <div ng-controller="TestCtrl">
 14 | 
 15 | 
 16 |   <form id="form" role="form" name="but">
 17 | 
 18 |     <div class="checkbox">
 19 |       <label>
 20 |         <input type="checkbox" value="" ng-model="form.typesEnabled">
 21 |         Types
 22 |       </label>
 23 |     </div>
 24 | 
 25 | 
 26 |     <div class="indent">
 27 |       <div class="radio">
 28 |         <label>
 29 |           <input type="radio" name="optionsRadios" id="optionsRadios1" value="geocode" checked ng-model="form.type" ng-disabled="!form.typesEnabled">
 30 |           Geocode
 31 |         </label>
 32 |       </div>
 33 |       <div class="radio">
 34 |         <label>
 35 |           <input type="radio" name="optionsRadios" id="optionsRadios2" value="establishment" ng-model="form.type" ng-disabled="!form.typesEnabled">
 36 |           Establishment
 37 |         </label>
 38 |       </div>
 39 |       <div class="radio">
 40 |         <label>
 41 |           <input type="radio" name="optionsRadios" id="optionsRadios3" value="(regions)" ng-model="form.type" ng-disabled="!form.typesEnabled">
 42 |           Regions
 43 |         </label>
 44 |       </div>
 45 |       <div class="radio">
 46 |         <label>
 47 |           <input type="radio" name="optionsRadios" id="optionsRadios4" value="(cities)" ng-model="form.type" ng-disabled="!form.typesEnabled">
 48 |           Cities
 49 |         </label>
 50 |       </div>
 51 |     </div>
 52 | 
 53 |     <div class="checkbox">
 54 |       <label>
 55 |         <input type="checkbox" value="" ng-model="form.boundsEnabled">
 56 |         Bounds
 57 |       </label>
 58 |     </div>
 59 | 
 60 |     <div class="indent">
 61 |       <div class="title">Southwest Corner</div>
 62 |       <label>
 63 |         lat:
 64 |         <input type="number" ng-model="form.bounds.SWLat" ng-disabled="!form.boundsEnabled">
 65 |       </label>
 66 |       <label>
 67 |         lng:
 68 |         <input type="number" ng-model="form.bounds.SWLng" ng-disabled="!form.boundsEnabled">
 69 |       </label>
 70 |       <div class="title">Northeast Corner</div>
 71 |       <label>
 72 |         lat:
 73 |         <input type="number" ng-model="form.bounds.NELat" ng-disabled="!form.boundsEnabled">
 74 |       </label>
 75 |       <label>
 76 |         lng:
 77 |         <input type="number" ng-model="form.bounds.NELng" ng-disabled="!form.boundsEnabled">
 78 |       </label>
 79 |     </div>
 80 | 
 81 | 
 82 |     <div class="checkbox">
 83 |       <label>
 84 |         <input type="checkbox" value="" ng-model="form.componentEnabled">
 85 |         Country
 86 |       </label>
 87 |     </div>
 88 |     <div class="indent">
 89 |       <select class="form-control" ng-model="form.country" ng-disabled="!form.componentEnabled">
 90 |         <option>ca</option>
 91 |         <option>us</option>
 92 |         <option>gb</option>
 93 |       </select>
 94 |     </div>
 95 |     <br><br>
 96 |     <div class="checkbox">
 97 |       <label>
 98 |         <input type="checkbox" value="" ng-model="form.watchEnter">
 99 |         Watch Enter
100 |       </label>
101 |     </div>
102 | 
103 | 
104 |     <div class="form-group move-down">
105 |       <label for="Autocomplete2">Autocomplete Model</label>
106 |       <input type="text" id="Autocomplete2" ng-model="autocomplete" class="form-control" ng-autocomplete options="options" details="details"/>
107 | 
108 |       <br>
109 |       <b>autocomplete</b>: {{autocomplete}}
110 |       <br><br>
111 |       <b>details (formatted address)</b>: {{details.formatted_address}}
112 | 
113 |     </div>
114 | 
115 |   </form>
116 | 
117 | </div>
118 | 
119 | <div>
120 | 
121 |   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
122 |   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
123 | 
124 |   <script type="text/javascript" src="/assets/src/ngAutocomplete.js"></script>
125 |   <script type="text/javascript" src="/assets/examples/advanced.js"></script>
126 |   <script type="text/javascript" src="/assets/src/ngAutocomplete.js"></script>
127 | 
128 | </div>
129 | 
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/src/ngAutocomplete.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * A directive for adding google places autocomplete to a text box
  5 |  * google places autocomplete info: https://developers.google.com/maps/documentation/javascript/places
  6 |  *
  7 |  * Usage:
  8 |  *
  9 |  * <input type="text"  ng-autocomplete ng-model="autocomplete" options="options" details="details/>
 10 |  *
 11 |  * + ng-model - autocomplete textbox value
 12 |  *
 13 |  * + details - more detailed autocomplete result, includes address parts, latlng, etc. (Optional)
 14 |  *
 15 |  * + options - configuration for the autocomplete (Optional)
 16 |  *
 17 |  *       + types: type,        String, values can be 'geocode', 'establishment', '(regions)', or '(cities)'
 18 |  *       + bounds: bounds,     Google maps LatLngBounds Object, biases results to bounds, but may return results outside these bounds
 19 |  *       + country: country    String, ISO 3166-1 Alpha-2 compatible country code. examples; 'ca', 'us', 'gb'
 20 |  *       + watchEnter:         Boolean, true; on Enter select top autocomplete result. false(default); enter ends autocomplete
 21 |  *
 22 |  * example:
 23 |  *
 24 |  *    options = {
 25 |  *        types: '(cities)',
 26 |  *        country: 'ca'
 27 |  *    }
 28 | **/
 29 | 
 30 | angular.module( "ngAutocomplete", [])
 31 |   .directive('ngAutocomplete', function() {
 32 |     return {
 33 |       require: 'ngModel',
 34 |       scope: {
 35 |         ngModel: '=',
 36 |         options: '=?',
 37 |         details: '=?'
 38 |       },
 39 | 
 40 |       link: function(scope, element, attrs, controller) {
 41 | 
 42 |         //options for autocomplete
 43 |         var opts
 44 |         var watchEnter = false
 45 |         //convert options provided to opts
 46 |         var initOpts = function() {
 47 | 
 48 |           opts = {}
 49 |           if (scope.options) {
 50 | 
 51 |             if (scope.options.watchEnter !== true) {
 52 |               watchEnter = false
 53 |             } else {
 54 |               watchEnter = true
 55 |             }
 56 | 
 57 |             if (scope.options.types) {
 58 |               opts.types = []
 59 |               opts.types.push(scope.options.types)
 60 |               scope.gPlace.setTypes(opts.types)
 61 |             } else {
 62 |               scope.gPlace.setTypes([])
 63 |             }
 64 | 
 65 |             if (scope.options.bounds) {
 66 |               opts.bounds = scope.options.bounds
 67 |               scope.gPlace.setBounds(opts.bounds)
 68 |             } else {
 69 |               scope.gPlace.setBounds(null)
 70 |             }
 71 | 
 72 |             if (scope.options.country) {
 73 |               opts.componentRestrictions = {
 74 |                 country: scope.options.country
 75 |               }
 76 |               scope.gPlace.setComponentRestrictions(opts.componentRestrictions)
 77 |             } else {
 78 |               scope.gPlace.setComponentRestrictions(null)
 79 |             }
 80 |           }
 81 |         }
 82 | 
 83 |         if (scope.gPlace == undefined) {
 84 |           scope.gPlace = new google.maps.places.Autocomplete(element[0], {});
 85 |         }
 86 |         google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
 87 |           var result = scope.gPlace.getPlace();
 88 |           if (result !== undefined) {
 89 |             if (result.address_components !== undefined) {
 90 | 
 91 |               scope.$apply(function() {
 92 | 
 93 |                 scope.details = result;
 94 | 
 95 |                 controller.$setViewValue(element.val());
 96 |               });
 97 |             }
 98 |             else {
 99 |               if (watchEnter) {
100 |                 getPlace(result)
101 |               }
102 |             }
103 |           }
104 |         })
105 | 
106 |         //function to get retrieve the autocompletes first result using the AutocompleteService 
107 |         var getPlace = function(result) {
108 |           var autocompleteService = new google.maps.places.AutocompleteService();
109 |           if (result.name.length > 0){
110 |             autocompleteService.getPlacePredictions(
111 |               {
112 |                 input: result.name,
113 |                 offset: result.name.length
114 |               },
115 |               function listentoresult(list, status) {
116 |                 if(list == null || list.length == 0) {
117 | 
118 |                   scope.$apply(function() {
119 |                     scope.details = null;
120 |                   });
121 | 
122 |                 } else {
123 |                   var placesService = new google.maps.places.PlacesService(element[0]);
124 |                   placesService.getDetails(
125 |                     {'reference': list[0].reference},
126 |                     function detailsresult(detailsResult, placesServiceStatus) {
127 | 
128 |                       if (placesServiceStatus == google.maps.GeocoderStatus.OK) {
129 |                         scope.$apply(function() {
130 | 
131 |                           controller.$setViewValue(detailsResult.formatted_address);
132 |                           element.val(detailsResult.formatted_address);
133 | 
134 |                           scope.details = detailsResult;
135 | 
136 |                           //on focusout the value reverts, need to set it again.
137 |                           var watchFocusOut = element.on('focusout', function(event) {
138 |                             element.val(detailsResult.formatted_address);
139 |                             element.unbind('focusout')
140 |                           })
141 | 
142 |                         });
143 |                       }
144 |                     }
145 |                   );
146 |                 }
147 |               });
148 |           }
149 |         }
150 | 
151 |         controller.$render = function () {
152 |           var location = controller.$viewValue;
153 |           element.val(location);
154 |         };
155 | 
156 |         //watch options provided to directive
157 |         scope.watchOptions = function () {
158 |           return scope.options
159 |         };
160 |         scope.$watch(scope.watchOptions, function () {
161 |           initOpts()
162 |         }, true);
163 | 
164 |       }
165 |     };
166 |   });


--------------------------------------------------------------------------------