fixed zindex thing - brightness was the problem

front/js/svelte/autocomplete/Autocomplete.svelte

@@ -0,0 +1,52 @@
+<script>
+
+    import Selectlist from "./Selectlist.svelte";
+    import Icon from "../common/Icon.svelte";
+
+    let searchEl;
+    let search;
+    export let value;
+    export let field;
+
+    function handleSelect(){
+        searchEl.focus();
+        searchEl.blur()
+    }
+</script>
+
+
+<div class="autocomplete">
+    <input
+            type="search"
+            bind:value={search}
+            bind:this={searchEl}
+            placeholder="Search for options"
+            autocomplete="off"
+    />
+    <div class="autocomplete-results">
+        <Selectlist
+                {field}
+                bind:value
+                bind:search
+                on:selected={handleSelect}
+        />
+    </div>
+</div>
+{#if value}
+    <div  class="autocomplete-selected-value">
+        {#if Array.isArray(field.selectOptions)}
+            {value}
+        {:else}
+            {field.selectOptions[value]}
+        {/if}
+        <button
+                on:click|preventDefault={(e) => (value = "")}
+                type="button"
+                class="button-text"
+                aria-label="Close"
+        >
+            <Icon width={12} height={12} icon="close"></Icon>
+        </button>
+
+    </div>
+{/if}

front/js/svelte/autocomplete/Selectlist.svelte

@@ -0,0 +1,60 @@
+<script>
+    import Fuse from "fuse.js";
+    import {createEventDispatcher} from "svelte";
+
+    export let field;
+    export let value;
+    export let search = "";
+
+    const dispatch = createEventDispatcher();
+
+
+    function select(e, option) {
+        e.preventDefault();
+        value = option.value;
+        search = "";
+        dispatch("selected", {option: option})
+    }
+
+
+    function formatOptionsForSearch(listOptions) {
+        if (Array.isArray(listOptions)) {
+            return listOptions.map(value => {
+                return {
+                    value: value,
+                    label: value,
+                }
+            })
+        }
+
+        return Object.entries(listOptions).map(([k, v]) => {
+            return {
+                value: k,
+                label: v,
+            }
+        })
+    }
+
+    let formattedOptions = formatOptionsForSearch(field.selectOptions);
+    const fuse = new Fuse(formattedOptions, {
+        includeScore: false,
+        keys: ['value', 'label']
+    })
+    $: result = search === "" ? formattedOptions : fuse.search(search).map(resItem => resItem.item)
+</script>
+
+{#if result}
+    {#each result as suggestion (suggestion.value)}
+        <div
+                class="autocomplete-option"
+                role="button"
+                tabindex="0"
+                on:click={(e) => select(e, suggestion)}
+                on:keypress={(e) => select(e, suggestion)}
+        >
+            <span class="dropdown-item">
+               {suggestion.label}
+            </span>
+        </div>
+    {/each}
+{/if}