A datalist tag

A datalist tag automatikus kiegészítést hoz létre a input beviteli mezők számára HTML űrlapokban.

Az automatikus kiegészítés lényege: amikor a felhasználó próbál valamit beírni a beviteli mezőbe, alul megjelenik egy felugró útmutató, amely az elérhető választási lehetőségek listáját jelenti. A felhasználó kiválaszthatja az egyik javasolt lehetőséget anélkül, hogy teljesen be kellene gépelnie.

Ahhoz, hogy a input taghoz automatikus kiegészítést rendeljünk, meg kell adni a list attribútumot, amelyben a hozzárendelt datalist tag id attribútumát kell megadni.

A választási lehetőségek option tag-ekben tárolódnak, amelyek viszont a datalist tag-ben találhatók.

Példa

Adjunk meg egy országot a beviteli mezőben. Először írjunk be egy 'b' betűt - és három országból álló felugró útmutatót fogunk látni. Majd gépeljünk be még egy 'e' betűt - a javasolt országok száma kettőre csökken:

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

Példa

Most adjuk hozzá a value attribútumot a option tag-hez. Amikor egy adott országot választunk ki, nem az ország neve kerül a hozzárendelt input mezőbe, hanem a value attribútum tartalma:

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

Példa . Az autocomplete attribútum hatása

A legördülő javaslatlistára hatással van a autocomplete attribútum. Ha be van kapcsolva (és ez lesz az alapértelmezés), akkor a datalist tag-ben megadott értékekhez hozzávegyülnek azok az értékek, amelyeket a felhasználó korábban ebbe a mezőbe írt be.

Írja be a 'Brazil' szót a mezőbe, és nyomja meg az elküldés gombot (küldés nélkül a böngésző nem fogja emlékezni erre az országra). Majd térjen vissza ehhez a példához és írja be a 'b' betűt - a megjelenő listában nem csak a datalist-ből származó 3 országot fogja látni, hanem a korábban beírt országot is (amellett, hogy ha ugyanezt megteszi a 'Belarus' szóval - a legördülő listában ez az érték kétszer fog megjelenni).

Ha ez zavarja - kapcsolja ki a autocomplete attribútumot a off érték megadásával.

Végezze el a fent leírt manipulációkat a példával:

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

Lásd még

a autocomplete attribútum,
amely automatikus kiegészítést állít be az űrlap mezőihez