Glenn GoossensandClaude Opus 5
8084cbc9f0
Makes any <select> with many options searchable, for web apps whose dropdowns have no search. The original <select> stays in the DOM and remains the source of truth: choosing an option sets selectedIndex and fires native input/change events, so the host application and its form submission are unaffected. Handles option lists that the app repopulates at runtime via a per-select MutationObserver, and new selects appearing after AJAX via a document-level one. Filtering is substring-based, accent-insensitive and multi-token. Built into both a Tampermonkey userscript and a bookmarklet from one source. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
select-search
Geeft elke <select> met veel opties een zoekveld, voor webapplicaties waarvan de dropdowns geen
zoekfunctie hebben. Een native dropdown zoekt alleen op de eerste letters, dus "Poule" vinden in
"Restaurant Poule & Poulette B.V." lukt niet. Met dit script wel.
Het originele <select> blijft bestaan en blijft de bron van waarheid: het wordt enkel visueel
verborgen. Een keuze zet selectedIndex en vuurt native input- en change-events, dus de
applicatie merkt geen verschil met een gewone selectie en het formulier verstuurt hetzelfde als
voorheen.
Installeren
Chrome
- Installeer Tampermonkey uit de Chrome Web Store.
- Open de installatielink. Tampermonkey herkent het bestand en toont zijn installatiescherm in plaats van de broncode.
- Klik op installeren.
Edge
Dezelfde stappen, maar haal Tampermonkey uit de Edge Add-ons store, niet uit de Chrome Web Store. Violentmonkey is een open source alternatief dat dezelfde scripts draait.
Staat je browser onder beheer van je werkgever, dan kan het zijn dat extensies alleen van een goedgekeurde lijst mogen komen. Vraag dat na bij je IT-dienst voor je het probeert.
Zonder extensie: de bookmarklet
Mag je geen extensies installeren, gebruik dan de bookmarklet. Die vraagt niets van je browser en werkt overal, maar je moet hem per pagina zelf aanklikken.
- Neem de inhoud van
dist/bookmarklet.txtover. - Toon de bladwijzerbalk, rechtsklik erop en kies Bladwijzer toevoegen.
- Naam:
Zoek in dropdown. URL: de gekopieerde tekst. - Klik de bladwijzer aan op de pagina met de dropdown. Nog eens klikken doet een herscan.
Websites met een strikte Content-Security-Policy blokkeren bookmarklets. Werkt hij niet, dan is de extensie de enige route.
Gebruik
- Typen filtert op substring, niet alleen op het begin, en negeert accenten.
geneevindtGenée. - Meerdere woorden mogen in willekeurige volgorde:
poule restvindtRestaurant Poule & Poulette B.V. - Pijltjes navigeren, Enter kiest, Escape sluit zonder te wijzigen, Tab kiest en gaat verder.
- Boven de 200 treffers stopt het met tekenen en toont het hoeveel er nog zijn. Verfijn dan je zoekterm.
Dropdowns met minder dan 10 opties blijven onaangeroerd.
Als er iets misgaat
Alt+klik op een zoekveld zet voor dat ene veld het originele keuzemenu terug, voor als een
specifiek veld zich vreemd gedraagt. Zet data-nosearch op een <select> om hem permanent over te
slaan.
Er gebeurt niets op de pagina. Controleer in het Tampermonkey-dashboard of de URL van de pagina
onder de @match van het script valt. Zit het formulier in een <iframe> van een ander domein, dan
kan het script daar niet bij: dat is een beperking van de browser, niet van het script.
Zelf aanpassen
src/select-search.js bevat de volledige logica, zonder dependencies. build.sh genereert daaruit
het userscript en de bookmarklet in dist/.
./build.sh
Wijzig je iets, hoog dan @version op in src/userscript-header.txt. Zonder verhoging krijgt
niemand de update binnen.
test/fixture.html bootst een echte applicatie na: 850 opties en een checkbox die de optielijst
vervangt, met een formulier dat toont welke waarde er werkelijk verstuurd wordt.
python3 -m http.server 8731
# open http://localhost:8731/test/fixture.html
Licentie
MIT