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:
co-authored by
Claude Opus 5
parent
ac63e0be43
commit
98095f3fc6
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user