Autocomplete for plans activity types

src/lib/components/AutoComplete.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let items: String[] = [];
+  export let selectedItem;
+
+  $: inputVal = "";
+
+  function onItemClicked(item: String) {
+    selectedItem = item;
+    inputVal = "";
+  }
+
+  $: filteredItems = items.filter(function (item) {
+    return item.toLowerCase().includes(inputVal.toLowerCase());
+  });
+</script>
+
+<div class="dropdown">
+  <input
+    class="input input-bordered"
+    placeholder="Existing Activity Types"
+    bind:value={inputVal}
+  />
+  <ul
+    tabindex="0"
+    class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 max-h-80 flex-nowrap overflow-auto"
+  >
+    {#each filteredItems as item}
+      <li>
+        <a on:click|preventDefault={() => onItemClicked(item)}>{item}</a>
+      </li>
+    {/each}
+  </ul>
+</div>

src/lib/components/CreateNewAdventure.svelte

@@ -17,13 +17,35 @@
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
   import { addActivityType, generateDescription, getImage } from "$lib";
+  import AutoComplete from "./AutoComplete.svelte";
   let modal: HTMLDialogElement;
 
-  onMount(() => {
+  let activityTypes: string[] = [];
+
+  $: selected = "";
+
+  // on selection add to activityTypes
+  $: {
+    if (selected) {
+      newAdventure = addActivityType(selected, newAdventure);
+
+      if (activityInput.length === 0) {
+        activityInput = selected;
+      } else {
+        activityInput = activityInput + ", " + selected;
+      }
+      selected = "";
+    }
+  }
+
+  onMount(async () => {
     modal = document.getElementById("my_modal_1") as HTMLDialogElement;
     if (modal) {
       modal.showModal();
     }
+    let activityFetch = await fetch("/api/activitytypes?type=" + type);
+    let res = await activityFetch.json();
+    activityTypes = res.types;
   });
 
   function create() {
@@ -133,6 +155,7 @@
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
+          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
         </div>
         <div>
           <label for="rating">Rating</label>

src/lib/components/EditModal.svelte

@@ -5,18 +5,42 @@
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
   import { addActivityType, generateDescription, getImage } from "$lib";
+  import AutoComplete from "./AutoComplete.svelte";
   let modal: HTMLDialogElement;
 
   console.log(adventureToEdit.id);
 
   let originalName = adventureToEdit.name;
 
-  onMount(() => {
+  let activityTypes: string[] = [];
+
+  $: selected = "";
+
+  // on selection add to activityTypes
+  $: {
+    if (selected) {
+      adventureToEdit = addActivityType(selected, adventureToEdit);
+
+      if (activityInput.length === 0) {
+        activityInput = selected;
+      } else {
+        activityInput = activityInput + ", " + selected;
+      }
+      selected = "";
+    }
+  }
+
+  onMount(async () => {
     modal = document.getElementById("my_modal_1") as HTMLDialogElement;
     if (modal) {
       modal.showModal();
     }
     activityInput = (adventureToEdit?.activityTypes || []).join(", ");
+    let activityFetch = await fetch(
+      "/api/activitytypes?type=" + adventureToEdit.type
+    );
+    let res = await activityFetch.json();
+    activityTypes = res.types;
   });
 
   function submit() {
@@ -120,6 +144,7 @@
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
+          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
         </div>
         <div>
           <label for="rating">Rating</label>