README: simplify and add Firefox install

Instructions were prose; now steps and tables. Firefox was missing and
needs no "Allow user scripts" toggle, so that step is split out as
Chromium-only. Bookmarklet moved to its own section at the end.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Glenn Goossens
2026-08-24 15:46:37 +02:00
co-authored by Claude Opus 5
parent ac63e0be43
commit 98095f3fc6
+47 -59
View File
@@ -1,85 +1,73 @@
# select-search # select-search
Geeft elke `<select>` met veel opties een zoekveld, voor webapplicaties waarvan de dropdowns geen Geeft elke `<select>` met veel opties een zoekveld. Een native dropdown zoekt alleen op de eerste
zoekfunctie hebben. Een native dropdown zoekt alleen op de *eerste* letters, dus "Poule" vinden in letters, dus "Poule" vinden in "Restaurant Poule & Poulette B.V." lukt niet. Met dit script wel.
"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 Het originele `<select>` blijft de bron van waarheid en wordt enkel verborgen. Het formulier
verborgen. Een keuze zet `selectedIndex` en vuurt native `input`- en `change`-events, dus de verstuurt dus exact hetzelfde als voorheen.
applicatie merkt geen verschil met een gewone selectie en het formulier verstuurt hetzelfde als
voorheen.
## Installeren ## Installeren
Werkt hetzelfde in Chrome en Edge. 1. Installeer Tampermonkey voor je browser:
1. Installeer Tampermonkey: | Browser | Extensie | Extra stap |
[Chrome](https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) |---|---|---|
of [Edge](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd). | Firefox | [installeren](https://addons.mozilla.org/firefox/addon/tampermonkey/) | geen |
2. Zet eenmalig **Allow user scripts** aan. Ga naar je extensiepagina | Chrome | [installeren](https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) | zie stap 2 |
(`chrome://extensions` of `edge://extensions`), klik bij Tampermonkey op *Details* en zet die | Edge | [installeren](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd) | zie stap 2 |
schakelaar om. Zonder dat draait geen enkel userscript.
3. Open de [installatielink](https://raw.githubusercontent.com/glgoose/select-search/main/dist/select-search.user.js).
Tampermonkey toont zijn installatiescherm in plaats van de broncode.
4. Klik op installeren.
Staat je browser onder beheer van je werkgever, dan kan het zijn dat extensies alleen van een 2. Alleen Chrome en Edge: ga naar `chrome://extensions` of `edge://extensions`, klik bij
goedgekeurde lijst mogen komen. Vraag dat na bij je IT-dienst voor je het probeert. Tampermonkey op *Details* en zet **Allow user scripts** aan. Zonder dat draait geen enkel
userscript.
### Zonder extensie: de bookmarklet 3. Open de
[installatielink](https://raw.githubusercontent.com/glgoose/select-search/main/dist/select-search.user.js)
en klik op installeren.
Mag je geen extensies installeren, gebruik dan de bookmarklet. Die vraagt niets van je browser en Beheert je werkgever je browser, dan zijn extensies mogelijk beperkt tot een goedgekeurde lijst.
werkt overal, maar je moet hem per pagina zelf aanklikken. Vraag het na bij IT. Kan het niet, gebruik dan de [bookmarklet](#bookmarklet).
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 ## Gebruik
- Typen filtert op **substring**, niet alleen op het begin, en negeert accenten. `genee` vindt Klik een dropdown aan en typ.
`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. - Zoekt op **substring**, negeert accenten: `genee` vindt `Genée`.
- Meerdere woorden in willekeurige volgorde: `poule rest` vindt `Restaurant Poule & Poulette B.V.`
- Pijltjes navigeren, Enter kiest, Escape sluit, Tab kiest en gaat verder.
- Dropdowns met minder dan 10 opties blijven onaangeroerd.
- Boven 200 treffers toont het enkel het aantal. Verfijn dan je zoekterm.
## Als er iets misgaat ## Problemen
**Alt+klik** op een zoekveld zet voor dat ene veld het originele keuzemenu terug, voor als een | Symptoom | Oplossing |
specifiek veld zich vreemd gedraagt. Zet `data-nosearch` op een `<select>` om hem permanent over te |---|---|
slaan. | Eén veld doet raar | **Alt+klik** op het zoekveld zet daar het originele menu terug |
| Veld moet altijd overgeslagen | Zet `data-nosearch` op de `<select>` |
| Niets gebeurt op de pagina | Check in het Tampermonkey-dashboard of de URL onder `@match` valt |
| Formulier zit in een iframe van een ander domein | Niet op te lossen, browserbeperking |
**Er gebeurt niets op de pagina.** Controleer in het Tampermonkey-dashboard of de URL van de pagina ## Bookmarklet
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 Alternatief zonder extensie. Werkt overal, maar je klikt hem zelf aan per pagina.
`src/select-search.js` bevat de volledige logica, zonder dependencies. `build.sh` genereert daaruit 1. Kopieer de inhoud van [`dist/bookmarklet.txt`](dist/bookmarklet.txt).
het userscript en de bookmarklet in `dist/`. 2. Maak een bladwijzer met naam `Zoek in dropdown` en die tekst als URL.
3. Klik hem aan op de pagina met de dropdown. Nog eens klikken doet een herscan.
Sites met een strikte Content-Security-Policy blokkeren bookmarklets. Dan is de extensie de enige
route.
## Ontwikkelen
`src/select-search.js` bevat de volledige logica, zonder dependencies.
```sh ```sh
./build.sh ./build.sh # genereert dist/ (userscript + bookmarklet)
python3 -m http.server 8731 # open http://localhost:8731/test/fixture.html
``` ```
Wijzig je iets, hoog dan `@version` op in `src/userscript-header.txt`. Zonder verhoging krijgt Hoog bij elke wijziging `@version` op in `src/userscript-header.txt`, anders krijgt niemand de
niemand de update binnen. 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 ## Licentie