@maptiler/geocoding-control 2.1.2 → 2.1.3-rc1

package/style.css

@@ -1 +1 @@
-svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-z7p9pp.svelte-z7p9pp{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content;outline:0}li.svelte-z7p9pp.svelte-z7p9pp:first-child{padding-top:10px}li.svelte-z7p9pp.svelte-z7p9pp:last-child{padding-bottom:10px}li.picked.svelte-z7p9pp.svelte-z7p9pp{background-color:#e7edff}li.picked.svelte-z7p9pp .secondary.svelte-z7p9pp{color:#96a4c7;padding-left:4px}li.picked.svelte-z7p9pp .line2.svelte-z7p9pp{color:#96a4c7}li.selected.svelte-z7p9pp.svelte-z7p9pp{background-color:#f3f6ff}li.selected.svelte-z7p9pp.svelte-z7p9pp{animation:svelte-z7p9pp-backAndForth 5s linear infinite}li.selected.svelte-z7p9pp .primary.svelte-z7p9pp{color:#2b8bfb}li.selected.svelte-z7p9pp .secondary.svelte-z7p9pp{color:#a2adc7;padding-left:4px}li.selected.svelte-z7p9pp .line2.svelte-z7p9pp{color:#a2adc7}li.svelte-z7p9pp>img.svelte-z7p9pp{align-self:center;justify-self:center;opacity:.75}.texts.svelte-z7p9pp.svelte-z7p9pp{padding:0 17px 0 0}.texts.svelte-z7p9pp>.svelte-z7p9pp{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-z7p9pp.svelte-z7p9pp{font-weight:600}.secondary.svelte-z7p9pp.svelte-z7p9pp{color:#aeb6c7;padding-left:4px}.line2.svelte-z7p9pp.svelte-z7p9pp{color:#aeb6c7}@keyframes svelte-z7p9pp-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-bz0zu3.svelte-bz0zu3{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3:after,form.svelte-bz0zu3 .svelte-bz0zu3:before{box-sizing:border-box}form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:29px}form.can-collapse.svelte-bz0zu3 input.svelte-bz0zu3::placeholder{transition:opacity .25s;opacity:0}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3.svelte-bz0zu3:focus-within,form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}form.svelte-bz0zu3 input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:focus-within input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:hover input.svelte-bz0zu3::placeholder{opacity:1}input.svelte-bz0zu3.svelte-bz0zu3{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input.svelte-bz0zu3.svelte-bz0zu3:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-bz0zu3.svelte-bz0zu3,div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul.svelte-bz0zu3.svelte-bz0zu3{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-bz0zu3.svelte-bz0zu3{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-bz0zu3 div.svelte-bz0zu3{flex-grow:1}div.error.svelte-bz0zu3 svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-bz0zu3 button.svelte-bz0zu3{flex-shrink:0}div.error.svelte-bz0zu3 button.svelte-bz0zu3>svg{width:13px;fill:#e25041}div.error.svelte-bz0zu3 button.svelte-bz0zu3:hover svg,div.error.svelte-bz0zu3 button.svelte-bz0zu3:active svg{fill:#444952}div.no-results.svelte-bz0zu3.svelte-bz0zu3{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-bz0zu3 svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.leaflet-bottom ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-left ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-right ul.options.svelte-bz0zu3.svelte-bz0zu3{top:auto;bottom:calc(100% + 6px)}button.svelte-bz0zu3.svelte-bz0zu3{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-bz0zu3.svelte-bz0zu3:hover{background-color:transparent}button.svelte-bz0zu3:hover svg,button.svelte-bz0zu3:active svg{fill:#2b8bfb}.input-group.svelte-bz0zu3.svelte-bz0zu3{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-bz0zu3.svelte-bz0zu3{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-bz0zu3.svelte-bz0zu3{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-bz0zu3.svelte-bz0zu3{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:33px}.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:focus-within,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}
+svg.svelte-d2loi5{display:block;fill:#e15042}.sprite-icon.svelte-w9y5n9.svelte-w9y5n9{align-self:center;justify-self:center;opacity:.75;background-repeat:no-repeat}li.svelte-w9y5n9.svelte-w9y5n9{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content;outline:0}li.svelte-w9y5n9.svelte-w9y5n9:first-child{padding-top:10px}li.svelte-w9y5n9.svelte-w9y5n9:last-child{padding-bottom:10px}li.picked.svelte-w9y5n9.svelte-w9y5n9{background-color:#e7edff}li.picked.svelte-w9y5n9 .secondary.svelte-w9y5n9{color:#96a4c7;padding-left:4px}li.picked.svelte-w9y5n9 .line2.svelte-w9y5n9{color:#96a4c7}li.selected.svelte-w9y5n9.svelte-w9y5n9{background-color:#f3f6ff}li.selected.svelte-w9y5n9.svelte-w9y5n9{animation:svelte-w9y5n9-backAndForth 5s linear infinite}li.selected.svelte-w9y5n9 .primary.svelte-w9y5n9{color:#2b8bfb}li.selected.svelte-w9y5n9 .secondary.svelte-w9y5n9{color:#a2adc7;padding-left:4px}li.selected.svelte-w9y5n9 .line2.svelte-w9y5n9{color:#a2adc7}li.svelte-w9y5n9>img.svelte-w9y5n9{align-self:center;justify-self:center;opacity:.75}.texts.svelte-w9y5n9.svelte-w9y5n9{padding:0 17px 0 0}.texts.svelte-w9y5n9>.svelte-w9y5n9{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-w9y5n9.svelte-w9y5n9{font-weight:600}.secondary.svelte-w9y5n9.svelte-w9y5n9{color:#aeb6c7;padding-left:4px}.line2.svelte-w9y5n9.svelte-w9y5n9{color:#aeb6c7}@keyframes svelte-w9y5n9-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-bz0zu3.svelte-bz0zu3{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3:after,form.svelte-bz0zu3 .svelte-bz0zu3:before{box-sizing:border-box}form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:29px}form.can-collapse.svelte-bz0zu3 input.svelte-bz0zu3::placeholder{transition:opacity .25s;opacity:0}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3.svelte-bz0zu3:focus-within,form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}form.svelte-bz0zu3 input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:focus-within input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:hover input.svelte-bz0zu3::placeholder{opacity:1}input.svelte-bz0zu3.svelte-bz0zu3{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input.svelte-bz0zu3.svelte-bz0zu3:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-bz0zu3.svelte-bz0zu3,div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul.svelte-bz0zu3.svelte-bz0zu3{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-bz0zu3.svelte-bz0zu3{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-bz0zu3 div.svelte-bz0zu3{flex-grow:1}div.error.svelte-bz0zu3 svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-bz0zu3 button.svelte-bz0zu3{flex-shrink:0}div.error.svelte-bz0zu3 button.svelte-bz0zu3>svg{width:13px;fill:#e25041}div.error.svelte-bz0zu3 button.svelte-bz0zu3:hover svg,div.error.svelte-bz0zu3 button.svelte-bz0zu3:active svg{fill:#444952}div.no-results.svelte-bz0zu3.svelte-bz0zu3{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-bz0zu3 svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.leaflet-bottom ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-left ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-right ul.options.svelte-bz0zu3.svelte-bz0zu3{top:auto;bottom:calc(100% + 6px)}button.svelte-bz0zu3.svelte-bz0zu3{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-bz0zu3.svelte-bz0zu3:hover{background-color:transparent}button.svelte-bz0zu3:hover svg,button.svelte-bz0zu3:active svg{fill:#2b8bfb}.input-group.svelte-bz0zu3.svelte-bz0zu3{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-bz0zu3.svelte-bz0zu3{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-bz0zu3.svelte-bz0zu3{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-bz0zu3.svelte-bz0zu3{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:33px}.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:focus-within,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}

package/svelte/FeatureItem.svelte

@@ -1,36 +1,69 @@
+<script context="module">"use strict";
+const hidpi = devicePixelRatio > 1.25;
+const scaleUrl = hidpi ? "@2x" : "";
+const scaleFactor = hidpi ? 2 : 1;
+let sprites;
+let spritePromise;
+</script>
+
 <script>import { createEventDispatcher } from "svelte";
 export let feature;
 export let style = "default";
 export let showPlaceType;
 export let missingIconsCache;
 export let iconsBaseUrl;
+$: categories = feature.properties?.categories;
+$: isReverse = feature.place_type[0] === "reverse";
 const dispatch = createEventDispatcher();
-const categories = feature.properties?.categories;
 let category;
 let imageUrl;
-let loadIconAttempt = 0;
-let isReverse = feature.place_type[0] === "reverse";
-$: index = categories?.length ?? 0;
-$: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    loadIconAttempt;
-    do {
-        index--;
-        category = categories?.[index];
-        imageUrl = category
-            ? iconsBaseUrl + category.replace(/ /g, "_") + ".svg"
-            : undefined;
-    } while (index > -1 && (!imageUrl || missingIconsCache.has(imageUrl)));
-}
+let spriteIcon;
+let index;
 $: placeType =
     feature.properties?.categories?.join(", ") ??
         feature.properties?.place_type_name?.[0] ??
         feature.place_type[0];
+$: {
+    index = categories?.length ?? 0;
+    loadIcon();
+}
+function loadSprites() {
+    spritePromise ??= fetch(`${iconsBaseUrl}/sprite${scaleUrl}.json`)
+        .then((response) => response.json())
+        .then((data) => {
+        sprites = data;
+    })
+        .catch(() => {
+        sprites = null;
+    });
+}
 function handleImgError() {
     if (imageUrl) {
         missingIconsCache.add(imageUrl);
     }
-    loadIconAttempt++;
+    loadIcon();
+}
+function loadIcon() {
+    if (sprites !== undefined) {
+        loadIcon2();
+    }
+    else {
+        loadSprites();
+        spritePromise?.then(loadIcon2);
+    }
+}
+function loadIcon2() {
+    do {
+        index--;
+        category = categories?.[index];
+        spriteIcon = category ? sprites?.icons[category] : undefined;
+        if (spriteIcon) {
+            break;
+        }
+        imageUrl = category
+            ? iconsBaseUrl + category.replace(/ /g, "_") + ".svg"
+            : undefined;
+    } while (index > -1 && (!imageUrl || missingIconsCache.has(imageUrl)));
 }
 </script>
 
@@ -50,7 +83,19 @@ function handleImgError() {
     }
   }}
 >
-  {#if imageUrl}
+  {#if sprites && spriteIcon}
+    <div
+      class="sprite-icon"
+      style={`
+        width: ${spriteIcon.width / scaleFactor}px;
+        height: ${spriteIcon.height / scaleFactor}px;
+        background-image: url(${iconsBaseUrl}sprite${scaleUrl}.png);
+        background-position: -${spriteIcon.x / scaleFactor}px -${spriteIcon.y / scaleFactor}px;
+        background-size: ${sprites.width / scaleFactor}px ${sprites.height / scaleFactor}px;
+      `}
+      title={placeType}
+    />
+  {:else if imageUrl}
     <img
       src={imageUrl}
       alt={category}
@@ -100,7 +145,14 @@ function handleImgError() {
   </span>
 </li>
 
-<style>li {
+<style>.sprite-icon {
+  align-self: center;
+  justify-self: center;
+  opacity: 0.75;
+  background-repeat: no-repeat;
+}
+
+li {
   text-align: left;
   cursor: default;
   display: grid;

package/svelte/GeocodingControl.svelte

@@ -67,6 +67,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;
@@ -81,7 +82,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.2" +
+    "2.1.3-rc1" +
     "/icons/";
 /**
  * @deprecated use `adjustUrl`
@@ -150,6 +151,7 @@ let error;
 let cachedFeatures = [];
 let abortController;
 let searchTimeoutRef;
+let autocompleteTimeoutRef;
 let focusedDelayed;
 let prevIdToFly;
 let focused = false;
@@ -209,6 +211,14 @@ $: setTimeout(() => {
         searchValue = "";
     }
 });
+function isInAutocompleteTimeout() {
+    return !!autocompleteTimeoutRef;
+}
+$: if (selectFirst && listFeatures?.length) {
+    if (!isInAutocompleteTimeout()) {
+        selectedItemIndex = 0;
+    }
+}
 $: if (selectFirst &&
     listFeatures?.length &&
     selectedItemIndex == -1 &&
@@ -216,6 +226,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);
@@ -275,9 +289,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 =
@@ -309,7 +329,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();
@@ -320,7 +340,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) {
@@ -570,21 +590,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) {
@@ -643,6 +671,7 @@ function handleMouseLeave() {
         type="button"
         on:click={() => {
           searchValue = "";
+          picked = undefined;
           input.focus();
         }}
         title={clearButtonTitle}

package/svelte/GeocodingControl.svelte.d.ts

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

package/svelte/info.json

@@ -1 +1 @@
-{"name":"@maptiler/geocoding-control","version":"2.1.2"}
+{"name":"@maptiler/geocoding-control","version":"2.1.3-rc1"}

package/svelte/types.d.ts

@@ -87,6 +87,7 @@ export type ControlOptions = {
      * Default: MapTiler Geocoding API URL.
      */
     apiUrl?: string;
+    autocompleteTimeout?: number;
     /**
      * Bounding box in the format `[minX, minY, maxX, maxY]` to limit search results.
      *

package/types.d.ts

@@ -87,6 +87,7 @@ export type ControlOptions = {
      * Default: MapTiler Geocoding API URL.
      */
     apiUrl?: string;
+    autocompleteTimeout?: number;
     /**
      * Bounding box in the format `[minX, minY, maxX, maxY]` to limit search results.
      *