Die datalist-tag
Die datalist-tag skep outomatiese aanvulling
vir invoervelde input
in 'n HTML vorm.
Die kern van outomatiese aanvulling: wanneer die gebruiker iets in die invoerveld probeer intik, sal 'n opspringwyser onderaan verskyn wat 'n lys van beskikbare keuses voorstel. Die gebruiker kan een van die voorgestelde opsies kies sonder om dit heeltemal in te tik.
Om outomatiese aanvulling aan 'n input-tag
te koppel, moet jy die
list-kenmerk spesifiseer, waarin jy die id-kenmerk
van die gekoppelde datalist-tag moet aandui.
Keuseopsies word gestoor in option-tags,
wat weer in die datalist-tag gestoor word.
Voorbeeld
Kom ons tik 'n land in die invoerveld in. Laat ons eers
die letter 'b' tik - en dan sien ons 'n opspringwyser
met drie lande. Dan tik ons nog die letter
'e' - die aantal voorgestelde
lande sal verminder tot twee:
<input type="text" list="country">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
</datalist>
:
Voorbeeld
Kom ons voeg nou die value-kenmerk by die
option-tag. As 'n sekere land gekies word,
sal nie die naam van die land in die gekoppelde invoerveld verskyn nie,
maar eerder die inhoud van die value-kenmerk:
<input type="text" list="country-value">
<datalist id="country-value">
<option value="Belarus">Belarus - a country of lakes and potatoes</option>
<option value="Belgium">Belgium - a country where Belgians live</option>
<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>
:
Voorbeeld . Die invloed van die autocomplete-kenmerk
Die aftreklys van voorstelle word beïnvloed deur
die autocomplete-kenmerk.
As dit aangeskakel is (en dit is die verstek),
dan sal die waardes wat jy in die
datalist-tag gespesifiseer het, gemeng word met die waardes
wat die gebruiker voorheen in hierdie veld ingetik het.
Tik 'Brazil' in die veld in en druk
die stuurknop (sonder om te stuur sal die blaaier nie hierdie land onthou nie).
Kom dan terug na hierdie voorbeeld
en tik die letter 'b' in - in die verskynde
lys sal jy nie net die 3 lande
van die datalist sien nie, maar ook die land wat voorheen ingetik is (boonop,
as jy dieselfde doen met die woord
'Belarus' - sal hierdie waarde
twee keer in die aftreklys wees).
As dit jou in die pad staan - skakel die autocomplete-kenmerk af,
deur die waarde off by te voeg.
Voer die bogenoemde handelinge met die voorbeeld uit:
<form action="">
<input type="text" list="country" autocomplete="on">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
<input type="submit">
</datalist>
</form>
:
Sien ook
-
die
autocomplete-kenmerk,
wat outomatiese aanvulling vir vormvelde spesifiseer
