improved autocompletion

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/Autocomplete.svelte

@@ -4,6 +4,7 @@
 
 
     let {
+        id            = null,
         autofocus     = false,
         getCandidates = dummyGetCandidates,
         onCommit      = dummyOnCommit,
@@ -14,7 +15,8 @@
     const ignore   = ['ArrowLeft','ArrowRight'];
     //let candidate  = $state({ display : '' });
     let selected   = $state([]);
-    let candidates = $derived(getCandidates(candidate.display));
+    let candidates = $state([]);
+    let timer      = null;
 
     async function dummyGetCandidates(text){
         console.warn(`getCandidates(${text}) not overridden!`);
@@ -52,10 +54,14 @@
         candidate = candidates[idx];
         candidates = [];
         selected = [];
-        console.log(candidate);
         onSelect(candidate);
     }
 
+    async function fetchCandidates(){
+        candidates = await getCandidates(candidate.display);
+        if (selected>candidates.length) selected = candidates.length;
+    }
+
     async function onkeyup(ev){
         if (ignore.includes(ev.key)) return;
         if (ev.key == 'ArrowDown'){
@@ -93,8 +99,9 @@
             return false;
         }
 
-        candidates = await getCandidates(candidate.display);
-        if (selected>candidates.length) selected = candidates.length;
+        candidate = { display : candidate.display };
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(fetchCandidates,400);
         return false;
     }
 </script>
@@ -103,12 +110,12 @@
     span { position : relative }
     select { position : absolute; top: 30px; left: 3px; }
 
-    select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; }
+    select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; z-index: 50; }
     option:checked { background: orange; color: black; }
 </style>
 
 <span>
-    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} />
+    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} {id} />
     {#if candidates && candidates.length > 0}
     <select bind:value={selected} {ondblclick} multiple tabindex="-1">
         {#each candidates as candidate,i}