improving autocomplete

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

frontend/src/Components/Autocomplete.svelte

@@ -17,6 +17,7 @@
     let selected   = $state(null);
     let candidates = $state([]);
     let timer      = null;
+    let list_elem;
 
     async function dummyGetCandidates(text){
         console.warn(`getCandidates(${text}) not overridden!`);
@@ -58,9 +59,8 @@
     }
 
     async function fetchCandidates(){
-        candidates = await getCandidates(candidate.display);
+        candidates = candidate.display ? await getCandidates(candidate.display) : [];
         selected = null;
-        if (selected>candidates.length) selected = candidates.length;
     }
 
     async function onkeyup(ev){
@@ -69,12 +69,14 @@
             ev.preventDefault();
             selected = selected == null ? 0: selected +1;
             if (selected >= candidates.length) selected = 0;
+            scrollTo(selected);
             return false;
         }
         if (ev.key == 'ArrowUp'){
             ev.preventDefault();
             selected = selected == null ? candidates.length -1 : selected -1;
             if (selected < 0) selected = candidates.length -1;
+            scrollTo(selected);
             return false;
         }
         if (ev.key == 'Enter'|| ev.key == 'Tab'){
@@ -113,6 +115,11 @@
         onSelect(candidate);
 
     }
+
+    function scrollTo(index){
+        let list_elements = list_elem.children;
+        if (list_elements) list_elements[index].scrollIntoView({block:'center'});
+    }
 </script>
 
 <style>
@@ -129,6 +136,9 @@
         list-style: none;
         padding: 4px;
         margin: 0;
+        min-width: 400px;
+        max-height: 200px;
+        overflow: scroll;
     }
     .highlight { background: orange; color: black; }
 
@@ -137,7 +147,7 @@
 <span>
     <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} {id} />
     {#if candidates && candidates.length > 0}
-    <ul>
+    <ul bind:this={list_elem}>
         {#each candidates as candidate,i}
         <li class="option {selected==i?'highlight':''}" onclick={e => selected = i} ondblclick={e => select(i)}>{candidate.display}</li>
         {/each}