feat: Add AutoComplete functionality to activity types input

src/lib/components/AutoComplete.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   export let items: String[] = [];
+  export let displayValue: String = "";
   export let selectedItem;
 
+  let newAdd: String[] = [];
+
   $: inputVal = "";
 
   function onItemClicked(item: String) {
-    selectedItem = item;
-    inputVal = "";
+    // items.push(item);
+    console.log(newAdd);
+    if (newAdd.includes(item)) {
+      return;
+    } else {
+      newAdd.push(item);
+      selectedItem = item;
+    }
   }
 
   $: filteredItems = items.filter(function (item) {
@@ -17,15 +26,21 @@
 <div class="dropdown">
   <input
     class="input input-bordered"
-    placeholder="Existing Activity Types"
-    bind:value={inputVal}
+    placeholder=""
+    bind:value={displayValue}
   />
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <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}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-missing-attribute -->
       <li>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-missing-attribute -->
         <a on:click|preventDefault={() => onItemClicked(item)}>{item}</a>
       </li>
     {/each}

src/lib/components/CreateNewAdventure.svelte

@@ -151,11 +151,17 @@
           <label for="date">Activity Types (Comma Seperated)</label>
           <input
             type="text"
+            hidden
             id="activityTypes"
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
-          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
+
+          <AutoComplete
+            items={activityTypes}
+            bind:selectedItem={selected}
+            bind:displayValue={activityInput}
+          />
         </div>
         <div>
           <label for="rating">Rating</label>

src/lib/components/EditModal.svelte

@@ -137,14 +137,19 @@
           />
         </div>
         <div>
-          <label for="date">Activity Types (Comma Seperated)</label>
           <input
             type="text"
+            hidden
             id="activityTypes"
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
-          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
+          <label for="date">Activity Types (Comma Seperated)</label>
+          <AutoComplete
+            items={activityTypes}
+            bind:selectedItem={selected}
+            bind:displayValue={activityInput}
+          />
         </div>
         <div>
           <label for="rating">Rating</label>