Merge pull request #111 from Heyian/GeocompleteMinLength

Added minimum characters for autocompletion for cost optimization

Author: cheesegrits

README.md

@@ -650,11 +650,15 @@ provide your own closure for handling reverse geocode data, as described in the
         ->debug() // output the results of reverse geocoding in the browser console, useful for figuring out symbol formats
         ->updateLatLng() // update the lat/lng fields on your form when a Place is selected
         ->maxLength(1024)
+        ->minChars(0) // minimum number of characters before autocomplete starts
         ->prefix('Choose:')
         ->placeholder('Start typing an address ...')
         ->geolocate() // add a suffix button which requests and reverse geocodes the device location
         ->geolocateIcon('heroicon-o-map'), // override the default icon for the geolocate button
 ```
+This field is *cost optimized*, so it will only start searching for places after 300ms of inactivity, and will not
+search while you are typing.  This is to prevent excessive API calls, as Google charges for each one. If you set the minChars
+to 0, it will start searching immediately. I suggest you set it to a minimum of 3.
 
 The Geocomplete field also offers many of the same features as Filament's TextInput,
 like prefixes, suffixes, placeholders, etc.

dist/cheesegrits/filament-google-maps/filament-google-geocomplete.js

@@ -12,7 +12,11 @@ export default function filamentGoogleGeocomplete({
   placeField,
   reverseGeocodeUsing,
   hasReverseGeocodeUsing = false,
+  minChars,
 }) {
+  const geocompleteEl = isLocation ? statePath + "-fgm-address" : statePath;
+  const geoComplete = document.getElementById(geocompleteEl);
+
   return {
     geocoder: null,
     mapEl: null,
@@ -68,8 +72,23 @@ export default function filamentGoogleGeocomplete({
     init: function (mapEl) {
       console.log("geocomplete init");
       this.mapEl = mapEl;
-      this.loadGMaps();
-    },
+
+      let typingTimer;
+      const doneTypingInterval = 300; // milliseconds
+
+      geoComplete.addEventListener('input', () => {
+        clearTimeout(typingTimer);
+
+        if (geoComplete.value.length >= minChars) {
+          typingTimer = setTimeout(() => {
+            console.log('minChars met, loading GMaps');
+            this.loadGMaps();
+          }, doneTypingInterval);
+        } else {
+          console.log('minChars not met');
+        }
+      });
+      },
 
     createAutocomplete: function () {
       window.filamentGoogleMapsAPILoaded = true;
@@ -91,9 +110,6 @@ export default function filamentGoogleGeocomplete({
         types: types,
       };
 
-      const geocompleteEl = isLocation ? statePath + "-fgm-address" : statePath;
-      const geoComplete = document.getElementById(geocompleteEl);
-
       if (geoComplete) {
         window.addEventListener(
           "keydown",

resources/js/filament-google-geocomplete.js

@@ -58,6 +58,7 @@ class="w-full"
                         countries: @js($getCountries()),
                         debug: @js($getDebug()),
                         gmaps: @js($getMapsUrl()),
+                        minChars: @js($getMinChars()),
                     })"
             wire:ignore
         >

resources/views/fields/filament-google-geocomplete.blade.php

@@ -52,6 +52,8 @@ class Geocomplete extends Field implements Contracts\CanBeLengthConstrained, Con
 
     protected Closure|bool $debug = false;
 
+    protected int $minChars = 0;
+
     /**
      * DO NOT USE!  Only used by the Radius Filter, to set the state path for the filter form data.
      *
@@ -416,6 +418,7 @@ public function getGeocompleteConfig(): string
             'placeField'           => $this->getPlaceField(),
             'debug'                => $this->getDebug(),
             'gmaps'                => $this->getMapsUrl(),
+            'minChars'             => $this->getMinChars(),
         ]);
 
         //ray($config);
@@ -456,4 +459,16 @@ public function getFormattedState(): string
 
         return $state;
     }
+
+    public function minChars(int $minChars): static
+    {
+        $this->minChars = $minChars;
+
+        return $this;
+    }
+
+    public function getMinChars(): int
+    {
+        return $this->evaluate($this->minChars);
+    }
 }