Update SearchBox

Author: fallaciousreasoning

src/components/MapSearch.svelte

@@ -1,98 +1,95 @@
 <script lang="ts">
-  import Control from "../ol/Control.svelte";
-  import geocode from "../search/geocode";
-  import type { GeocodeResult } from "../search/geocode";
-  import { createEventDispatcher, tick } from "svelte";
-  import { getOlContext } from "../ol/Map.svelte";
-  import MapControl from "./MapControl.svelte";
-  import grow from "../transitions/grow";
-  import { debounce } from "../utils/debounce";
-  import Spinner from "./Spinner.svelte";
-  import { filterResults } from "../search/match";
+  import geocode from '../search/geocode'
+  import { createEventDispatcher, tick } from 'svelte'
+  import { getOlContext } from '../ol/Map.svelte'
+  import MapControl from './MapControl.svelte'
+  import grow from '../transitions/grow'
+  import type { Place } from '../search/places'
 
-  const dispatcher = createEventDispatcher();
-  const { map } = getOlContext();
+  const dispatcher = createEventDispatcher()
+  const { map } = getOlContext()
 
-  let searchBox: HTMLInputElement;
+  let searchBox: HTMLInputElement
   $: {
     if (searchBox) {
-      searchBox.focus();
+      searchBox.focus()
     }
   }
 
-  let query = "";
-  let debouncedQuery = query;
+  let query = ''
 
-  let open = false;
-  let results: GeocodeResult[] = [];
-  $: filteredResults = filterResults(results, query);
+  let open = false
+  let results: Place[] = []
 
-  let shouldClose = false;
+  let shouldClose = false
   const close = () => {
-    shouldClose = true;
+    shouldClose = true
     setTimeout(() => {
-      if (!shouldClose) return;
-      open = false;
-    });
-  };
+      if (!shouldClose) return
+      open = false
+    })
+  }
 
-  const debouncedOnlineSearch = debounce(async () => {
+  const updateResults = async (query: string) => {
     try {
-      results = await geocode(query);
+      let currentQuery = query
+      const queryResults = await geocode(currentQuery)
+      if (query === currentQuery) results = queryResults
     } catch {}
-    searching = false;
-    debouncedQuery = query;
-  }, 0);
+  }
 
-  $: searching = debouncedQuery !== query;
   $: {
-    if (debouncedQuery !== query) debouncedOnlineSearch();
+    updateResults(query)
   }
 
-  const selectResult = (result: GeocodeResult) => {
-    dispatcher("change", { result, map });
-    open = false;
-  };
+  const selectResult = (result: Place) => {
+    dispatcher('change', { result, map })
+    open = false
+  }
 </script>
 
 <MapControl>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
     tabindex="0"
     on:focusin={(e) => {
-      shouldClose = false;
-      open = true;
+      shouldClose = false
+      open = true
     }}
-    on:focusout={close}>
+    on:focusout={close}
+  >
     <div
-      class="transition-colors divide-purple-200 flex rounded items-start border ${open && 'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary'}">
-      {#if !searching}
-        <button
-          tabindex="-1"
-          class={`transition-colors duration-200 map-button flex-shrink-0 ${open && 'bg-primary focus:bg-primary-hover hover:bg-primary-hover'}`}>
-          <span class="-mx-2">🔎</span>
-        </button>
-      {:else}
-        <div class="w-11 bg-primary rounded">
-          <Spinner class="text-background" />
-        </div>
-      {/if}
+      class="transition-colors divide-purple-200 flex rounded items-start border ${open &&
+        'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary'}"
+    >
+      <button
+        tabindex="-1"
+        class={`transition-colors duration-200 map-button flex-shrink-0 ${
+          open && 'bg-primary focus:bg-primary-hover hover:bg-primary-hover'
+        }`}
+      >
+        <span class="-mx-2">🔎</span>
+      </button>
 
       {#if open}
         <input
           bind:this={searchBox}
           transition:grow={{ animateHeight: false }}
-          class={`${!open && 'hidden'} h-full py-2 px-2 rounded-l-none appearance-none rounded focus:outline-none`}
+          class={`${
+            !open && 'hidden'
+          } h-full py-2 px-2 rounded-l-none appearance-none rounded focus:outline-none`}
           type="search"
-          bind:value={query} />
+          bind:value={query}
+        />
       {/if}
     </div>
     {#if open}
-      <div
-        class={`max-h-72 overflow-y-auto ${!!filteredResults.length && 'mt-1'}`}>
-        {#each filteredResults.slice(0, 20) as result}
+      <div class={`max-h-72 overflow-y-auto ${!!results.length && 'mt-1'}`}>
+        {#each results.slice(0, 20) as result}
           <div
             class="opacity-95 hover:bg-background-hover px-2 py-1"
-            on:click={() => selectResult(result)}>
+            on:click={() => selectResult(result)}
+          >
             {result.name}
           </div>
         {/each}