Datalist teqi

datalist teqi HTML formasında input daxil etme sahələri üçün avtomatik tamamlama yaradır.

Avtomatik tamamlamanın mahiyyəti: istifadəçi daxil etme sahəsinə nə isə yazmağa çalışdıqda, aşağıda mövcud seçim variantlarının siyahısını təqdim edən açılan bir ipucu görünəcək. İstifadəçi təklif olunan variantlardan birini tamamilə yazmadan seçə biləcək.

input teqinə avtomatik tamamlama əlavə etmək üçün ona list atributunu təyin etmək lazımdır, bu atributda bağlanan datalist teqinin id atributunu göstərmək lazımdır.

Seçim variantları datalist teqinin içində yerləşən option teqlərində saxlanılır.

Nümunə

Gəlin daxil etme sahəsinə ölkə adı daxil edək. Əvvəlcə 'b' hərfini daxil edək - və üç ölkədən ibarət açılan bir ipucu görəcəyik. Sonra 'e' hərfini daxil edək - təklif olunan ölkələrin sayı ikiə enəcək:

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

Nümunə

Gəlin indi option teqinə value atributunu əlavə edək. Müəyyən bir ölkə seçildikdə, bağlanan input sahəsinə ölkənin adı deyil, value atributunun məzmunu düşəcək:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - göllər və kartof ölkəsi</option>
	<option value="Belgium">Belgium - belgiyalıların yaşadığı ölkə</option>
	<option value="Bulgaria">Bulgaria - tətil üçün ölkə</option>
</datalist>

Nümunə . Autocomplete atributunun təsiri

Açılan ipucu siyahısına autocomplete atributu təsir göstərir. Əgər o aktivdirsə (və standart olaraq belə olacaq), onda datalist teqində təyin etdiyiniz dəyərlərə, istifadəçinin əvvəllər bu sahəyə daxil etdiyi dəyərlər qarışacaq.

Sahəyə 'Brazil' daxil edin və göndərmə düyməsini basın (göndərmədən brauzer bu ölkəni xatırlamayacaq). Sonra bu nümunəyə qayıdın və 'b' hərfini daxil edin - yaranan siyahıda yalnız datalist-dən olan 3 ölkəni deyil, həm də əvvəllər daxil edilmiş ölkəni görəcəksiniz (bundan əlavə, 'Belarus' sözü ilə eyni şeyi etsəniz - açılan siyahıda bu dəyər iki dəfə olacaq).

Əgər bu sizə mane olursa - autocomplete atributunu off dəyərini təyin edərək deaktiv edin.

Təsvir olunan manipulyasiyaları nümunə ilə yerinə yetirin:

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

Həmçinin bax

autocomplete atributu,
forma sahələrinə avtomatik tamamlama təyin edir