Datalist-tagi

datalist-tagi luo automaattisen täydennyksen syöttökentille input HTML-lomakkeessa.

Automaattisen täydennyksen ydinajatus: kun käyttäjä yrittää kirjoittaa jotain syöttökenttään, alareunaan ilmestyy ponnahdusikkuna, joka esittää käytettävissä olevien valintojen listan. Käyttäjä voi valita yhden ehdotetuista vaihtoehdoista ilman, että hänen tarvitsee kirjoittaa sitä loppuun asti.

Liittääkseen input-tagiin automaattisen täydennyksen, sille on annettava attribuutti list, johon tulee määrittää liitettävän datalist-tagin id-attribuutti.

Valintavaihtoehdot tallennetaan option-tageihin, joita puolestaan säilytetään datalist-tagissa.

Esimerkki

Syötetään syöttökenttään maa. Kirjoitetaan ensin kirjain 'b' - ja näemme ponnahdusikkunassa kolmen maan vihjeen. Sen jälkeen kirjoitetaan vielä kirjain 'e' - ehdotettujen maiden määrä pienenee kahteen:

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

Esimerkki

Lisätään nyt option-tagille value-attribuutti. Kun valitaan tietty maa, liitettyyn input-kenttään ei päädy maan nimi vaan value-attribuutin sisältö:

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

Esimerkki . Autocomplete-attribuutin vaikutus

Pudotusvalikkovaikutteisiin vaikuttaa autocomplete-attribuutti. Jos se on käytössä (kuten on oletusarvoisesti), niin datalist-tagissa asetettuihin arvoihin sekoittuu niitä arvoja, joita käyttäjä on aiemmin syöttänyt tähän kenttään.

Kirjoita kenttään 'Brazil' ja paina lähetyspainiketta (ilman lähetystä selain ei muista tätä maata). Palaa sitten tähän esimerkkiin ja kirjoita kirjain 'b' - ilmestyneessä listassa näet paitsi 3 maata datalist-tagista, myös aiemmin kirjoitetun maan (lisäksi, jos teet saman sanan 'Belarus' kanssa - pudotusvalikossa tämä arvo tulee näkyviin kahdesti).

Jos tämä häiritsee - poista autocomplete-attribuutti käytöstä antamalla sille arvo off.

Tee edellä kuvatut toimenpiteet esimerkin kanssa:

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

Katso myös

autocomplete-attribuutti,
joka asettaa automaattisen täydennyksen lomakekentille