Add option getPlaceOnBlur to retrieve the top autocomplete result on input's blur event

README.md

@@ -1,6 +1,6 @@
 # ng-Autocomplete
 
-A simple directive for adding google places autocomplete to a textbox element. 
+A simple directive for adding google places autocomplete to a textbox element.
 
 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.
 
@@ -16,7 +16,7 @@ Uses optional directive parameters, so it won't work with <1.2. If people are in
 
 ## Usage
 
-Include the required libraries 
+Include the required libraries
 ```html
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
 ```
@@ -40,12 +40,13 @@ Add the directive to a textbox
 
 + options - configuration for the autocomplete (Optional)
 
-    + types: type,        String, values can be 'geocode', 'establishment', '(regions)', or '(cities)'
+  + types: type,        String, values can be 'geocode', 'establishment', '(regions)', or '(cities)'
 	+ bounds: bounds,     Google maps LatLngBounds Object, biases results to bounds, but may return results outside these bounds
 	+ country: country    String, ISO 3166-1 Alpha-2 compatible country code. examples; 'ca', 'us', 'gb'
-    + watchEnter:         Boolean, true; on Enter select top autocomplete result. false(default); enter ends autocomplete  
+  + watchEnter:         Boolean, true; on Enter select top autocomplete result. false(default); enter ends autocomplete
+  + getPlaceOnBlur:         Boolean, true; on blur select top autocomplete result. false(default);
 
-example: 
+example:
 ``` javascript
 options = {
 types: '(cities)',

src/ngAutocomplete.js

@@ -27,8 +27,8 @@
  *    }
 **/
 
-angular.module( "ngAutocomplete", [])
-  .directive('ngAutocomplete', function() {
+angular.module("ngAutocomplete", [])
+  .directive('ngAutocomplete', function () {
     return {
       require: 'ngModel',
       scope: {
@@ -37,13 +37,13 @@ angular.module( "ngAutocomplete", [])
         details: '=?'
       },
 
-      link: function(scope, element, attrs, controller) {
+      link: function (scope, element, attrs, controller) {
 
         //options for autocomplete
         var opts
         var watchEnter = false
         //convert options provided to opts
-        var initOpts = function() {
+        var initOpts = function () {
 
           opts = {}
           if (scope.options) {
@@ -83,12 +83,12 @@ angular.module( "ngAutocomplete", [])
         if (scope.gPlace == undefined) {
           scope.gPlace = new google.maps.places.Autocomplete(element[0], {});
         }
-        google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
+        google.maps.event.addListener(scope.gPlace, 'place_changed', function () {
           var result = scope.gPlace.getPlace();
           if (result !== undefined) {
             if (result.address_components !== undefined) {
 
-              scope.$apply(function() {
+              scope.$apply(function () {
 
                 scope.details = result;
 
@@ -104,37 +104,37 @@ angular.module( "ngAutocomplete", [])
         })
 
         //function to get retrieve the autocompletes first result using the AutocompleteService 
-        var getPlace = function(result) {
+        var getPlace = function (result) {
           var autocompleteService = new google.maps.places.AutocompleteService();
-          if (result.name.length > 0){
+          if (result.name.length > 0) {
             autocompleteService.getPlacePredictions(
               {
                 input: result.name,
                 offset: result.name.length
               },
               function listentoresult(list, status) {
-                if(list == null || list.length == 0) {
+                if (list == null || list.length == 0) {
 
-                  scope.$apply(function() {
+                  scope.$apply(function () {
                     scope.details = null;
                   });
 
                 } else {
                   var placesService = new google.maps.places.PlacesService(element[0]);
                   placesService.getDetails(
-                    {'reference': list[0].reference},
+                    { 'reference': list[0].reference },
                     function detailsresult(detailsResult, placesServiceStatus) {
 
                       if (placesServiceStatus == google.maps.GeocoderStatus.OK) {
-                        scope.$apply(function() {
+                        scope.$apply(function () {
 
                           controller.$setViewValue(detailsResult.formatted_address);
                           element.val(detailsResult.formatted_address);
 
                           scope.details = detailsResult;
 
                           //on focusout the value reverts, need to set it again.
-                          var watchFocusOut = element.on('focusout', function(event) {
+                          var watchFocusOut = element.on('focusout', function (event) {
                             element.val(detailsResult.formatted_address);
                             element.unbind('focusout')
                           })
@@ -148,6 +148,12 @@ angular.module( "ngAutocomplete", [])
           }
         }
 
+        if (scope.options.getPlaceOnBlur) {
+          element.bind('blur', function () {
+            getPlace({ name: controller.$viewValue });
+          });
+        }
+
         controller.$render = function () {
           var location = controller.$viewValue;
           element.val(location);