glenn/ua-userscripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

select-search: muis verzet de selectie, en Delete haalt een regel uit haar groep

Browse Source 
De blauwe balk werd alleen door de pijltjes verzet: er was een li.active-stijl maar
geen enkele hover- of mousemove-handler, dus wie met de muis over de lijst ging stond
nergens op. Nu verzet mousemove dezelfde active-regel als het toetsenbord. Bewust geen
mouseover, want een stilliggende muis boven de lijst zou dan de pijltjes blijven
tegenwerken.

Daarbovenop een generiek haakje om suggesties op te ruimen, zoals de adresbalk van een
browser dat doet. Een optie of optgroup met data-removable is met Delete te wissen: het
script haalt zelf niets weg maar stuurt een select-search:remove-event met value, label
en index, en wie de lijst bezit past de opties aan. Geen kruisje per regel: dat neemt
plek in en wie met de muis op een regel staat wil die kiezen, niet weggooien.

Delete vuurt alleen zolang er niets getypt is, anders blijft het een gewone teksttoets.
Die vraag werd eerst met input.value beantwoord, en dat is niet de zoekterm: bij een
open lijst zonder typwerk staat daar het gekozen label in, geselecteerd en klaar om over
te typen. Delete deed dus niets in precies de gewone situatie. De zoekterm zit nu in een
eigen variabele, en die lost hetzelfde stille probleem op in resync, die de open lijst
zou dichtfilteren op een label dat de gebruiker nooit intypte.

Na een herbouw van de opties blijft de balk staan waar hij stond, geklemd op de laatste
regel, zodat je meerdere regels achter elkaar kan wissen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Glenn Goossens
2026-09-01 16:59:22 +02:00
co-authored by Claude Opus 5
parent 6b473c6261
commit 05a37f31ce
6 changed files with 396 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/select-search/test/fixture.html
+42 -1
View File
@@ -20,7 +20,9 @@
<tr><td><label for="lev">Leverancier</label></td>
<td><select id="lev" name="leverancier"></select></td></tr>
<tr><td><label for="fab">Fabricaat</label></td>
<td><select id="fab" name="fabricaat"></select></td></tr>
<td><select id="fab" name="fabricaat" data-placeholder="fabricaat"></select></td></tr>
<tr><td><label for="groep">Met groepen</label></td>
<td><select id="groep" name="groep"></select></td></tr>
<tr><td><label for="klein">Klein menu</label></td>
<td><select id="klein" name="klein">
<option value="">--</option><option>Ja</option><option>Nee</option>
@@ -64,6 +66,44 @@ function vul(sel, n, offset){
sel.value = huidig;
}
// Select met optgroups: recent bovenaan, daarna de rest, plus een optie zonder groep die
// bovenaan los blijft staan. Labels lang genoeg om af te kappen.
function vulGroepen(sel){
sel.innerHTML = '';
var leeg = document.createElement('option');
leeg.value = ''; leeg.textContent = 'leverancier';
sel.appendChild(leeg);
var blokken = [
['recent', maak(3, 300)],
['alle leveranciers', maak(60, 700)]
];
blokken.forEach(function(blok){
var g = document.createElement('optgroup');
g.label = blok[0];
// Alleen recent mag met Delete uitgedund worden. Zo is de vlag hier ook echt getest.
if (blok[0] === 'recent') g.dataset.removable = '1';
blok[1].forEach(function(o){
var e = document.createElement('option');
e.value = o.v; e.textContent = o.t;
g.appendChild(e);
});
sel.appendChild(g);
});
}
vulGroepen(document.getElementById('groep'));
// De host beslist wat verwijderen betekent. Hier: de optie gaat uit recent en verhuist naar de
// tweede groep, net als het echte script met zijn recente budgetcodes doet.
document.getElementById('groep').addEventListener('select-search:remove', function(e){
var sel = e.currentTarget;
var weg = sel.options[e.detail.index];
if (!weg) return;
var doel = sel.querySelectorAll('optgroup')[1];
var gekozen = sel.value;
doel.insertBefore(weg, doel.firstChild);
sel.value = gekozen;
});
var lev = document.getElementById('lev'), fab = document.getElementById('fab');
function herlaad(){
var inclusief = document.getElementById('incl').checked;
@@ -83,6 +123,7 @@ document.getElementById('f').addEventListener('submit', function(e){
document.getElementById('uit').textContent =
'verzonden:\n leverancier = ' + d.get('leverancier') +
'\n fabricaat = ' + d.get('fabricaat') +
'\n groep = ' + d.get('groep') +
'\n klein = ' + d.get('klein') +
'\n (label leverancier: ' + (lev.options[lev.selectedIndex] || {textContent:''}).textContent + ')';
});