Added the geocodeAfterResult option

tableau-mkt-archived · Jul 1, 2014 · 28c9e1b · 28c9e1b
1 parent 7d8228f
commit 28c9e1b
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 6 deletions.
diff --git a/examples/blur.html b/examples/blur.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>$.geocomplete()</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <style type="text/css" media="screen">
+      .map_canvas { float: left; }
+      form { width: 300px; float: left; }
+      fieldset { width: 320px; margin-top: 20px}
+      fieldset label { display: block; margin: 0.5em 0 0em; }
+      fieldset input { width: 95%; }
+    </style>
+  </head>
+  <body>
+
+    <div class="map_canvas"></div>
+
+    <form>
+      <input id="geocomplete" type="text" placeholder="Type in an address" value="Empire State Bldg" />
+      <input id="other" type="text" placeholder="Type in a value" value="" />
+      <input id="find" type="button" value="find" />
+
+      <fieldset>
+        <h3>Address-Details</h3>
+
+        <label>Name</label>
+        <input name="name" type="text" value="">
+
+        <label>POI Name</label>
+        <input name="point_of_interest" type="text" value="">
+
+        <label>Latitude</label>
+        <input name="lat" type="text" value="">
+
+        <label>Longitude</label>
+        <input name="lng" type="text" value="">
+
+        <label>Location</label>
+        <input name="location" type="text" value="">
+
+        <label>Location Type</label>
+        <input name="location_type" type="text" value="">
+
+        <label>Formatted Address</label>
+        <input name="formatted_address" type="text" value="">
+
+        <label>Bounds</label>
+        <input name="bounds" type="text" value="">
+
+        <label>Viewport</label>
+        <input name="viewport" type="text" value="">
+
+        <label>Route</label>
+        <input name="route" type="text" value="">
+
+        <label>Street Number</label>
+        <input name="street_number" type="text" value="">
+
+        <label>Postal Code</label>
+        <input name="postal_code" type="text" value="">
+
+        <label>Locality</label>
+        <input name="locality" type="text" value="">
+
+        <label>Sub Locality</label>
+        <input name="sublocality" type="text" value="">
+
+        <label>Country</label>
+        <input name="country" type="text" value="">
+
+        <label>Country Code</label>
+        <input name="country_short" type="text" value="">
+
+        <label>State</label>
+        <input name="administrative_area_level_1" type="text" value="">
+
+        <label>ID</label>
+        <input name="id" type="text" value="">
+
+        <label>Reference</label>
+        <input name="reference" type="text" value="">
+
+        <label>URL</label>
+        <input name="url" type="text" value="">
+
+        <label>Website</label>
+        <input name="website" type="text" value="">
+      </fieldset>
+    </form>
+
+    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
+    <script src="../jquery.geocomplete.js"></script>
+
+    <script>
+      $(function(){
+        $("#geocomplete").geocomplete({
+          map: ".map_canvas",
+          details: "form",
+          blur: true,
+          geocodeAfterResult: true
+        });
+
+        $("#find").click(function(){
+          $("#geocomplete").trigger("geocode");
+        });
+      });
+    </script>
+
+  </body>
+</html>
+
diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js
@@ -32,6 +32,8 @@
   // * `markerOptions.disabled` - Do not show marker. Default: `false`. Set to true to disable marker.
   // * `maxZoom` - The maximum zoom level too zoom in after a geocoding response. Default: `16`
   // * `types` - An array containing one or more of the supported types for the places request. Default: `['geocode']` See the full list [here](http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests).
+  // * `blur` - Trigger geocode when input loses focus.
+  // * `geocodeAfterResult` - If blur is set to true, choose whether to geocode if user has explicitly selected a result before blur.
 
   var defaults = {
     bounds: true,
@@ -54,7 +56,8 @@
 
     maxZoom: 16,
     types: ['geocode'],
-    blur: false
+    blur: false,
+    geocodeAfterResult: false
   };
 
   // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types)
@@ -148,6 +151,9 @@
     // to fall back when the autocompleter does not return a value.
     initGeocoder: function(){
 
+      // Indicates is user did select a result from the dropdown.
+      var selected = false;
+
       var options = {
         types: this.options.types,
         bounds: this.options.bounds === true ? null : this.options.bounds,
@@ -182,16 +188,28 @@
         if (event.keyCode === 13){ return false; }
       });
 
+      // Assume that if user types anything after having selected a result,
+      // the selected location is not valid any more.
+      if (this.options.geocodeAfterResult === true){
+        this.$input.bind('keypress', $.proxy(function(){
+          if (event.keyCode != 9 && this.selected === true){
+              this.selected = false;
+          }
+        }, this));
+      }
+
       // Listen for "geocode" events and trigger find action.
       this.$input.bind("geocode", $.proxy(function(){
         this.find();
       }, this));
 
-      // Trigger find action when input element is blured out.
-      // (Usefull for typing partial location and tabing to the next field
+      // Trigger find action when input element is blurred out and user has
+      // not explicitly selected a result.
+      // (Useful for typing partial location and tabbing to the next field
       // or clicking somewhere else.)
       if (this.options.blur === true){
         this.$input.blur($.proxy(function(){
+          if (this.options.geocodeAfterResult === true && this.selected === true){ return; }
           this.find();
         }, this));
       }
@@ -330,7 +348,6 @@
     // If the geometry has a viewport, the map zooms out to fit the bounds.
     // Additionally it updates the marker position.
     center: function(geometry){
-
       if (geometry.viewport){
         this.map.fitBounds(geometry.viewport);
         if (this.map.getZoom() > this.options.maxZoom){
@@ -347,7 +364,7 @@
       }
     },
 
-    // Update the elements based on a single places or geoocoding response
+    // Update the elements based on a single places or geocoding response
     // and trigger the "geocode:result" event on the input.
     update: function(result){
 
@@ -446,8 +463,9 @@
     // If the place has no geometry it passes it to the geocoder.
     placeChanged: function(){
       var place = this.autocomplete.getPlace();
+      this.selected = true;
 
-      if (!place || !place.geometry){
+      if (!place.geometry){
         if (this.options.autoselect) {
           // Automatically selects the highlighted item or the first item from the
           // suggestions list.