SRSoftware/Umbrella
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

improved autocompletion

Browse Source 
Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
Stephan Richter
2026-04-21 09:28:39 +02:00
parent 0429e14715
commit da5cb8e4e7
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Components/Autocomplete.svelte
+13 -6
View File
@@ -4,6 +4,7 @@
let { let {
id = null,
autofocus = false, autofocus = false,
getCandidates = dummyGetCandidates, getCandidates = dummyGetCandidates,
onCommit = dummyOnCommit, onCommit = dummyOnCommit,
@@ -14,7 +15,8 @@
const ignore = ['ArrowLeft','ArrowRight']; const ignore = ['ArrowLeft','ArrowRight'];
//let candidate = $state({ display : '' }); //let candidate = $state({ display : '' });
let selected = $state([]); let selected = $state([]);
let candidates = $derived(getCandidates(candidate.display)); let candidates = $state([]);
let timer = null;
async function dummyGetCandidates(text){ async function dummyGetCandidates(text){
console.warn(`getCandidates(${text}) not overridden!`); console.warn(`getCandidates(${text}) not overridden!`);
@@ -52,10 +54,14 @@
candidate = candidates[idx]; candidate = candidates[idx];
candidates = []; candidates = [];
selected = []; selected = [];
console.log(candidate);
onSelect(candidate); onSelect(candidate);
} }
async function fetchCandidates(){
candidates = await getCandidates(candidate.display);
if (selected>candidates.length) selected = candidates.length;
}
async function onkeyup(ev){ async function onkeyup(ev){
if (ignore.includes(ev.key)) return; if (ignore.includes(ev.key)) return;
if (ev.key == 'ArrowDown'){ if (ev.key == 'ArrowDown'){
@@ -93,8 +99,9 @@
return false; return false;
} }
candidates = await getCandidates(candidate.display); candidate = { display : candidate.display };
if (selected>candidates.length) selected = candidates.length; if (timer) clearTimeout(timer);
timer = setTimeout(fetchCandidates,400);
return false; return false;
} }
</script> </script>
@@ -103,12 +110,12 @@
span { position : relative } span { position : relative }
select { position : absolute; top: 30px; left: 3px; } 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; } option:checked { background: orange; color: black; }
</style> </style>
<span> <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} {#if candidates && candidates.length > 0}
<select bind:value={selected} {ondblclick} multiple tabindex="-1"> <select bind:value={selected} {ondblclick} multiple tabindex="-1">
{#each candidates as candidate,i} {#each candidates as candidate,i}