Files

T

Glenn GoossensandClaude Opus 5 8084cbc9f0 Add select-search userscript and bookmarklet

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>

2026-08-24 11:26:54 +02:00

3.5 KiB

Raw Blame History

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.txt over.
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. genee vindt Genée.
Meerdere woorden mogen in willekeurige volgorde: poule rest vindt Restaurant 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

3.5 KiB Raw Blame History