implemented autocomplete input for tag editor

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

frontend/src/Components/Autocomplete.svelte

@@ -79,6 +79,7 @@
                 candidates = [];
                 selected = [];
                 onCommit(candidate);
+                candidate = { display : '' };
             }
             return false;
         }

frontend/src/routes/tags/TagList.svelte

@@ -2,7 +2,9 @@
     import {onMount}         from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
+    import Autocomplete from '../../Components/Autocomplete.svelte';
+
+    import { api, get, post }           from '../../urls.svelte.js';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js'
@@ -13,10 +15,9 @@
         tags      = $bindable([]),
         user_list = [],
     } = $props();
-    let newTag = $state('');
     let router = useTinyRouter();
 
-    async function addTag(){
+    async function addTag(newTag){
         if (!newTag) return;
         if (!id) {
             // when creating elements, they don`t have an id, yet
@@ -63,10 +64,21 @@
         return false;
     }
 
+    async function getCandidates(input){
+        if (!input || input.length <3) return [];
+        const url = api(`tags/search/${encodeURI(input)}`);
+        const res = await get(url);
+        if (res.ok){
+            yikes();
+            const list = await res.json();
+            return list.map(elem => {return {display:elem}});
+        } else error(res);
+    }
+
     async function loadTags(entityId){
         if (!entityId) return; // when crating elements, they dont`t have an id, yet.
         const url  = api(`tags/${module}/${entityId}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok) {
             tags = await resp.json();
             tags = tags.sort();
@@ -75,13 +87,16 @@
         }
     }
 
+    async function onCommit(wrapped){
+        addTag(wrapped.display);
+    }
+
+    function onSelect(dummy){}
+
     function show(tag){
         router.navigate(`/tags/use/${tag}`);
     }
 
-    function typed(ev){
-        if (ev.keyCode == 13) addTag();
-    }
 
     $effect(() => loadTags(id));
 </script>
@@ -93,6 +108,6 @@
     </span>
     {/each}
     <span class="tag editor">
-        <input type="text" bind:value={newTag} onkeyup={typed} />
+        <Autocomplete {getCandidates} {onCommit} {onSelect} />
     </span>
 </div>