diff --git a/frontend/src/Components/Autocomplete.svelte b/frontend/src/Components/Autocomplete.svelte index 35a02c88..64133f3b 100644 --- a/frontend/src/Components/Autocomplete.svelte +++ b/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; } @@ -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; } - + {#if candidates && candidates.length > 0}