Datalist tegi

datalist tegi HTML shaklidagi kirish maydonlari input uchun avtoto'ldirish yaratadi.

Avtoto'ldirishning mazmuni: foydalanuvchi kirish maydoniga biror narsa yozishga uringanda, pastda paydo bo'ladigan chiqib turuvchi ko'rsatma bo'lib, u mavjud tanlov variantlari ro'yxatini taqdim etadi. Foydalanuvchi taklif qilingan variantlardan birini oxirigacha kiritmasdan tanlashi mumkin.

input tegga avtoto'ldirishni bog'lash uchun unga list atributini belgilash kerak, unda bog'lanayotgan datalist teginging id atributi ko'rsatilishi kerak.

Tanlov variantlari option teglarida saqlanadi, ular o'z navbatida datalist tegi ichida saqlanadi.

Misol

Keling, kirish maydoniga mamlakat nomini kiritaylik. Avval 'b' harfini kiritamiz - va uchta mamlakatdan iborat chiqib turuvchi ko'rsatmani ko'ramiz. Keyin yana 'e' harfini kiritamiz - taklif qilingan mamlakatlar soni ikkitaga qisqaradi:

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

Misol

Keling, endi option tegga value atributini qo'shamiz. Muayyan mamlakatni tanlaganda, bog'langan inputga mamlakat nomi emas, balki value atributining mazmuni tushadi:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - ko'llar va kartoshka mamlakati</option>
	<option value="Belgium">Belgium - belgiyaliklar yashaydigan mamlakat</option>
	<option value="Bulgaria">Bulgaria - dam olish uchun mamlakat</option>
</datalist>

Misol . Autocomplete atributining ta'siri

Chiqib turuvchi ko'rsatmalar ro'yxatiga autocomplete atributi ta'sir ko'rsatadi. Agar u yoqilgan bo'lsa (va standart holatda shunday bo'ladi), unda datalist tegi uchun belgilagan qadriyatlaringizga foydalanuvchi oldin bu maydonga kiritgan qadriyatlar qo'shiladi.

Maydonga 'Brazil' so'zini kiriting va yuborish tugmasini bosing (yubormaslikda brauzer bu mamlakatni eslamaydi). Keyin ushbu misolga qayting va 'b' harfini kiriting - paydo bo'lgan ro'yxatda siz datalist dagi 3 ta mamlakatni emas, balki oldin kiritilgan mamlakatni ham ko'rasiz (bundan tashqari, agar siz 'Belarus' so'zi bilan ham xuddi shunday qilsangiz - chiqib turuvchi ro'yxatda bu qadriyat ikki marta paydo bo'ladi).

Agar bu sizga xalaqit bersa - autocomplete atributini o'chiring, unga off qadriyatini qo'shib.

Yuqorida tavsiflangan amallarni misol bilan bajaring:

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

Shuningdek qarang

autocomplete atributi,
shakl maydonlari uchun avtoto'ldirishni belgilaydi