working on Autocomplete field for member addition to projects

frontend/src/Components/Autocomplete.svelte

@@ -0,0 +1,47 @@
+<script>
+    import { t } from '../translations.svelte.js'
+    import { tick } from "svelte";
+
+    let { getOptionsFor = text => [], onSelect = text => [] } = $props();
+
+    let text = $state('')
+    let options = $state([]);
+
+    async function onkeyup(evt){
+        var select = evt.target;
+        var key = evt.key;
+        var ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
+        if (ignore.includes(key)) return;
+        if (key == 'ArrowDown'){
+            if (select.selectedIndex == 0) select.selectedIndex=1;
+            return;
+        }
+        if (key == 'Enter'){
+            text = select.value;
+            onSelect(text);
+            options=[];
+            return;
+        }
+        if (key == 'Backspace'){
+            text = text.substring(0,text.length-1)
+        } else if (key.length<2){
+            text += evt.key
+        }
+        options = await getOptionsFor(text);
+        await tick();
+        for (let o of select.getElementsByTagName('option')) o.selected = false;
+    }
+</script>
+
+<style>
+    select{
+        min-width: 200px;
+    }
+</style>
+<select size={options.length<2?2:options.length+1} {onkeyup} autofocus width="40">
+    <option>{text}</option>
+    {#each options as option,i}
+    <option>{option}</option>
+    {/each}
+</select>
+