Datalist tags

Tags datalist izveido automātisko aizpildīšanu ievades laukiem input HTML formā.

Automātiskās aizpildīšanas būtība: kad lietotājs mēģinās kaut ko ierakstīt ievades laukā, apakšā parādīsies uznirstošs padoms, kas parādīs pieejamo izvēļu sarakstu. Lietotājs varēs izvēlēties vienu no ieteiktajiem variantiem, neievadot to līdz beigām.

Lai piesietu tagam input automātisko aizpildīšanu, tam jāpiešķir atribūts list, kurā jānorāda piesietā taga datalist atribūts id.

Izvēles varianti tiek glabāti tagos option, kas savukārt tiek glabāti tagā datalist.

Piemērs

Ievadīsim ievades laukā valsti. Sākumā ievadīsim burtu 'b' - un redzēsim uznirstošu padomu no trim valstīm. Tad ievadīsim vēl un burtu 'e' - ieteikto valstu skaits samazināsies līdz divām:

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

Piemērs

Tagad pievienosim tagam option atribūtu value. Izvēloties noteiktu valsti, piesietajā ievades laukā nonāks ne valsts nosaukums, bet atribūta value saturs:

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

Piemērs . Autocomplete atribūta ietekme

Uz nolaižamo ieteikumu sarakstu ietekmē atribūts autocomplete. Ja tas ir ieslēgts (un tas tā būs pēc noklusējuma), tad pie vērtībām, ko esat iestatījis tagā datalist, tiks piejauktas tās vērtības, ko lietotājs iepriekš ir ievadījis šajā laukā.

Ierakstiet laukā 'Brazil' un nospiediet iesniegšanas pogu (bez iesniegšanas pārlūkprogramma neatcerēsies šo valsti). Pēc tam atgriezieties pie šī piemēra un ievadiet burtu 'b' - parādītajā sarakstā jūs redzēsiet ne tikai 3 valstis no datalist, bet arī iepriekš ievadīto valsti (izņemot to, ja jūs darīsit to pašu ar vārdu 'Belarus' - nolaižamajā sarakstā šī vērtība būs divas reizes).

Ja tas jums traucē - atslēdziet atribūtu autocomplete, pievienojot tam vērtību off.

Veiciet aprakstītās manipulācijas ar piemēru:

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

Skatiet arī

atribūts autocomplete,
kas iestata automātisko aizpildīšanu formas laukiem