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>
89 lines
3.5 KiB
Markdown
89 lines
3.5 KiB
Markdown
# 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
|
|
|
|
1. Installeer [Tampermonkey](https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)
|
|
uit de Chrome Web Store.
|
|
2. Open de [installatielink](https://raw.githubusercontent.com/glgoose/select-search/main/dist/select-search.user.js).
|
|
Tampermonkey herkent het bestand en toont zijn installatiescherm in plaats van de broncode.
|
|
3. Klik op installeren.
|
|
|
|
### Edge
|
|
|
|
Dezelfde stappen, maar haal Tampermonkey uit de **Edge Add-ons** store, niet uit de Chrome Web
|
|
Store. [Violentmonkey](https://microsoftedge.microsoft.com/addons/detail/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.
|
|
|
|
1. Neem de inhoud van [`dist/bookmarklet.txt`](dist/bookmarklet.txt) over.
|
|
2. Toon de bladwijzerbalk, rechtsklik erop en kies *Bladwijzer toevoegen*.
|
|
3. Naam: `Zoek in dropdown`. URL: de gekopieerde tekst.
|
|
4. 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/`.
|
|
|
|
```sh
|
|
./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.
|
|
|
|
```sh
|
|
python3 -m http.server 8731
|
|
# open http://localhost:8731/test/fixture.html
|
|
```
|
|
|
|
## Licentie
|
|
|
|
MIT
|