implemented autocomplete for filter in kanban

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

frontend/src/Components/Autocomplete.svelte

@@ -4,13 +4,15 @@
 
 
     let {
+        autofocus     = false,
         getCandidates = dummyGetCandidates,
         onCommit      = dummyOnCommit,
         onSelect      = dummyOnSelect,
+        candidate     = $bindable({ display : '' })
     } = $props();
 
     const ignore   = ['ArrowLeft','ArrowRight'];
-    let candidate  = $state({ display : '' });
+    //let candidate  = $state({ display : '' });
     let selected   = $state([]);
     let candidates = $derived(getCandidates(candidate.display));
 
@@ -36,6 +38,8 @@
         // either the selected candidate or
         // an anonymous object with the entered text in the display field
         console.warn(`onCommit(${JSON.stringify(candidate)}) not overridden!`);
+        // if the method returns true, the field will be cleared after committing
+        return true;
     }
 
     function dummyOnSelect(candidate){
@@ -78,8 +82,7 @@
             if (ev.key == 'Enter') {
                 candidates = [];
                 selected = [];
-                onCommit(candidate);
-                candidate = { display : '' };
+                if (onCommit(candidate)) candidate = { display : '' };
             }
             return false;
         }
@@ -97,15 +100,15 @@
 </script>
 
 <style>
-    div { position : relative }
+    span { position : relative }
     select { position : absolute; top: 30px; left: 3px; }
 
     select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; }
     option:checked { background: orange; color: black; }
 </style>
 
-<div>
-    <input type="text" bind:value={candidate.display} {onkeyup} />
+<span>
+    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} />
     {#if candidates && candidates.length > 0}
     <select bind:value={selected} {ondblclick} multiple tabindex="-1">
         {#each candidates as candidate,i}
@@ -113,4 +116,4 @@
         {/each}
     </select>
     {/if}
-</div>
+</span>