@maptiler/geocoding-control 2.1.0-rc1 → 2.1.0-with-autocomplete-timeout

package/svelte/GeocodingControl.svelte

@@ -65,6 +65,7 @@ export let searchValue = "";
 export let pickedResultStyle = "full-geometry";
 export let showPlaceType = "if-needed";
 export let showResultsWhileTyping = true;
+export let autocompleteTimeout = undefined;
 export let selectFirst = true;
 export let flyToSelected = false;
 export let markerOnSelected = true;
@@ -75,7 +76,7 @@ export let zoom = ZOOM_DEFAULTS;
 export let apiUrl = "https://api.maptiler.com/geocoding";
 export let fetchParameters = {};
 export let iconsBaseUrl = "https://cdn.maptiler.com/maptiler-geocoding-control/v" +
-    "2.1.0-rc1" +
+    "2.1.0-with-autocomplete-timeout" +
     "/icons/";
 /**
  * @deprecated use `adjustUrl`
@@ -144,6 +145,7 @@ let error;
 let cachedFeatures = [];
 let abortController;
 let searchTimeoutRef;
+let autocompleteTimeoutRef;
 let focusedDelayed;
 let prevIdToFly;
 let focused = false;
@@ -203,6 +205,14 @@ $: setTimeout(() => {
         searchValue = "";
     }
 });
+function isInAutocompleteTimeout() {
+    return !!autocompleteTimeoutRef;
+}
+$: if (selectFirst && listFeatures?.length) {
+    if (!isInAutocompleteTimeout()) {
+        selectedItemIndex = 0;
+    }
+}
 $: if (selectFirst &&
     listFeatures?.length &&
     selectedItemIndex == -1 &&
@@ -210,6 +220,10 @@ $: if (selectFirst &&
     selectedItemIndex = 0;
 }
 $: selected = listFeatures?.[selectedItemIndex];
+$: if (selected) {
+    window.clearTimeout(autocompleteTimeoutRef);
+    autocompleteTimeoutRef = undefined;
+}
 $: if (mapController) {
     const coords = isQueryReverse(searchValue);
     mapController.setReverseMarker(coords ? [coords.decimalLongitude, coords.decimalLatitude] : undefined);
@@ -269,9 +283,15 @@ onDestroy(() => {
 function handleSubmit(event) {
     focused = false;
     if (searchTimeoutRef) {
-        clearTimeout(searchTimeoutRef);
+        window.clearTimeout(searchTimeoutRef);
         searchTimeoutRef = undefined;
     }
+    if (autocompleteTimeoutRef) {
+        window.clearTimeout(autocompleteTimeoutRef);
+        autocompleteTimeoutRef = undefined;
+        search(searchValue, { appendSpace: true });
+        return;
+    }
     if (selectedItemIndex > -1 && listFeatures) {
         picked = listFeatures[selectedItemIndex];
         searchValue =
@@ -303,7 +323,7 @@ function isQueryReverse(searchValue) {
         return false;
     }
 }
-async function search(searchValue, { byId = false, exact = false, } = {}) {
+async function search(searchValue, { byId = false, exact = false, appendSpace = false, } = {}) {
     error = undefined;
     abortController?.abort();
     const ac = new AbortController();
@@ -314,7 +334,7 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
             "/" +
             encodeURIComponent(isReverse
                 ? isReverse.decimalLongitude + "," + isReverse.decimalLatitude
-                : searchValue) +
+                : searchValue + (appendSpace ? " " : "")) +
             ".json");
         const sp = urlObj.searchParams;
         if (language !== undefined) {
@@ -529,21 +549,29 @@ function handleInput(_, debounce = true, reverse = false) {
     error = undefined;
     picked = undefined;
     focused = true;
-    if (showResultsWhileTyping || reverse) {
-        if (searchTimeoutRef) {
-            clearTimeout(searchTimeoutRef);
-        }
-        if (searchValue.length < minLength) {
-            return;
-        }
-        const sv = searchValue;
-        searchTimeoutRef = window.setTimeout(() => {
-            search(sv).catch((err) => (error = err));
-        }, debounce ? debounceSearch : 0);
+    if (searchTimeoutRef) {
+        window.clearTimeout(searchTimeoutRef);
+        searchTimeoutRef = undefined;
     }
-    else {
+    if (autocompleteTimeoutRef) {
+        window.clearTimeout(autocompleteTimeoutRef);
+        autocompleteTimeoutRef = undefined;
+    }
+    if ((!showResultsWhileTyping && !reverse) ||
+        searchValue.length < minLength) {
         listFeatures = undefined;
-        error = undefined;
+        return;
+    }
+    const sv = searchValue;
+    searchTimeoutRef = window.setTimeout(() => {
+        searchTimeoutRef = undefined;
+        search(sv).catch((err) => (error = err));
+    }, debounce ? debounceSearch : 0);
+    if (!searchValue.endsWith(" ")) {
+        autocompleteTimeoutRef = window.setTimeout(() => {
+            autocompleteTimeoutRef = undefined;
+            search(sv, { appendSpace: true }).catch((err) => (error = err));
+        }, autocompleteTimeout);
     }
 }
 function pick(feature) {

package/svelte/GeocodingControl.svelte.d.ts

@@ -31,6 +31,7 @@ declare const __propDef: {
         pickedResultStyle?: PickedResultStyle;
         showPlaceType?: ShowPlaceType;
         showResultsWhileTyping?: boolean;
+        autocompleteTimeout?: number | undefined;
         selectFirst?: boolean;
         flyToSelected?: boolean;
         markerOnSelected?: boolean;

package/svelte/types.d.ts

@@ -132,6 +132,7 @@ export type ControlOptions = {
      * Default value is `false`.
      */
     showResultsWhileTyping?: boolean;
+    autocompleteTimeout?: number;
     /**
      * Set to `false` to disable fuzzy search.
      *

package/types.d.ts

@@ -132,6 +132,7 @@ export type ControlOptions = {
      * Default value is `false`.
      */
     showResultsWhileTyping?: boolean;
+    autocompleteTimeout?: number;
     /**
      * Set to `false` to disable fuzzy search.
      *