From ff184619cdc35bf770872e5a99d5ed6908c2c207 Mon Sep 17 00:00:00 2001 From: henkkae Date: Fri, 22 Aug 2014 09:37:13 +0300 Subject: [PATCH 1/2] Added option getPlaceOnBlur. You can get the top autocomplete result on input's blur event by setting it true. --- README.md | 9 +++++---- src/ngAutocomplete.js | 6 ++++++ 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 2298e11..e04c537 100644 --- a/README.md +++ b/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 ``` @@ -43,9 +43,10 @@ Add the directive to a textbox + 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)', diff --git a/src/ngAutocomplete.js b/src/ngAutocomplete.js index 3b0b33c..27f99f4 100644 --- a/src/ngAutocomplete.js +++ b/src/ngAutocomplete.js @@ -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); From 5cdd0473f01d60b66903069be7ae662485432c8e Mon Sep 17 00:00:00 2001 From: henkkae Date: Fri, 22 Aug 2014 09:43:32 +0300 Subject: [PATCH 2/2] getPlaceOnBlur reformatted --- README.md | 6 +++--- src/ngAutocomplete.js | 28 ++++++++++++++-------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index e04c537..8e38e43 100644 --- a/README.md +++ b/README.md @@ -40,11 +40,11 @@ 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 - + getPlaceOnBlur: Boolean, true; on blur select top autocomplete result. false(default); + + 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: ``` javascript diff --git a/src/ngAutocomplete.js b/src/ngAutocomplete.js index 27f99f4..d6dbca2 100644 --- a/src/ngAutocomplete.js +++ b/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,29 +104,29 @@ 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); @@ -134,7 +134,7 @@ angular.module( "ngAutocomplete", []) 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,7 +148,7 @@ angular.module( "ngAutocomplete", []) } } - if (scope.options.getPlaceOnBlur) { + if (scope.options.getPlaceOnBlur) { element.bind('blur', function () { getPlace({ name: controller.$viewValue }); });