Datalist žymė

Žymė datalist sukuria automatinį užpildymą įvesties laukams input HTML formoje.

Automatinio užpildymo esmė: kai vartotojas bandys ką nors įvesti į įvesties lauką, apačioje atsiras iššokantis patarimas, kuris bus pateiktas kaip prieinamų pasirinkimų sąrašas. Vartotojas galės pasirinkti vieną iš siūlomų variantų, neįvedant jo iki galo.

Norint susieti su žyme input automatinį užpildymą, jai reikia nustatyti atributą list, kuriame reikia nurodyti atributą id pririšamos žymės datalist.

Pasirinkimo variantai saugomi žymėse option, kurios savo ruožtu saugomos žymėje datalist.

Pavyzdys

Įveskime šalį į įvesties lauką. Pirmiausia įveskime raidę 'b' - ir pamatysime iššokančią promptą iš trijų šalių. Tada įveskime dar ir raidę 'e' - siūlomų šalių skaičius sumažės iki dviejų:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Pavyzdys

Dabar pridėkime prie žymės option atributą value. Pasirinkus tam tikrą šalį, į susietą input pateks ne šalies pavadinimas, o atributo value turinys:

<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>

Pavyzdys . Autocomplete atributo įtaka

Į išskleidžiamąjį patarimų sąrašą turi įtakos atributas autocomplete. Jei jis įjungtas (o taip bus pagal numatytuosius nustatymus), tai prie reikšmių, kurias nustatėte žymėje datalist, bus primaišytos tos reikšmės, kurias vartotojas anksčiau įvedė į šį lauką.

Įrašykite į lauką 'Brazil' ir paspauskite siuntimo mygtuką (be siuntimo naršyklė neprisimins šios šalies). Tada grįžkite prie šio pavyzdžio ir įveskite raidę 'b' - pasirodžiusiame sąraše pamatysite ne tik 3 šalis iš datalist, bet ir anksčiau įrašytą šalį (be to, jei tą patį padarysite su žodžiu 'Belarus' - išskleidžiamame sąraše ši reikšmė bus du kartus).

Jei tai jums trukdo - išjunkite atributą autocomplete, suteikdami jam reikšmę off.

Atlikite aukščiau aprašytas manipuliacias su pavyzdžiu:

<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>

Taip pat žiūrėkite

atributas autocomplete,
kuris nustato automatinį formos laukų užpildymą