<datalist> — kiritish maydoniga tayyor variantlar ro’yxatini beradigan teg. Foydalanuvchi maydonga yozganda, mos keladigan takliflar avtomatik ko’rinadi. Bu qidiruv maydonidagi “avtomatik to’ldirish” (autocomplete) tajribasini yaratadi.
<datalist>— kiritish maydoni (<input>) uchun oldindan belgilangan variantlar ro’yxatini taqdim etadigan teg. Foydalanuvchi variantni tanlashi yoki o’zi yozishi mumkin.
Oddiy foydalanish
<datalist> <input> ga list atributi orqali bog’lanadi:
<input list="tillar" placeholder="Til tanlang">
<datalist id="tillar">
<option value="Python">
<option value="JavaScript">
<option value="PHP">
<option value="Java">
</datalist>
[Kiritish maydoni: yozganda Python, JavaScript, PHP, Java takliflari chiqadi]
<input> ning list="tillar" atributi uni <datalist id="tillar"> bilan bog’ladi. Endi foydalanuvchi maydonga yozganda, mos variantlar taklif sifatida ko’rinadi.
datalist va select farqi
Ikkovi ham variantlar beradi, ammo muhim farq bilan. Uni jadvalda ko’ramiz:
| Xususiyat | <datalist> |
<select> |
|---|---|---|
| O’z qiymatini yozish | mumkin | mumkin emas |
| Ko’rinishi | kiritish maydoni + takliflar | ochiladigan ro’yxat |
| Filtrlash | yozgan sari filtrlanadi | yo’q |
<select> faqat berilgan variantlardan birini tanlashga majbur qiladi, <datalist> esa taklif beradi, ammo foydalanuvchi o’z qiymatini ham yozishi mumkin.
Amaliy misol
<datalist> qidiruv va forma maydonlarida foydalanuvchi tajribasini yaxshilaydi:
<label>Shahringiz:</label>
<input list="shaharlar" name="shahar">
<datalist id="shaharlar">
<option value="Toshkent">
<option value="Samarqand">
<option value="Buxoro">
</datalist>
[Foydalanuvchi "T" yozsa, "Toshkent" taklif qilinadi]
Foydalanuvchi “T” harfini yozganda “Toshkent” taklifi chiqadi. Bu yozishni tezlashtiradi va xatolarni kamaytiradi.
Amaliy eslatma
<datalist> ichidagi <option> teglari value atributi orqali qiymat beradi va ular ko’rinmaydigan, faqat taklif sifatida ishlatiladigan ro’yxatni tashkil qiladi. Bu teg forma to’ldirishni qulayroq qiladi, ayniqsa ko’p ishlatiladigan qiymatlar (shaharlar, mahsulotlar, teglar) uchun. Brauzer qo’llab-quvvatlashi keng, shuning uchun uni bemalol ishlatish mumkin.
Xulosa
Bu bo’limda <datalist> tegini, uni <input> ga list orqali bog’lashni, <select> dan farqini va amaliy foydasini ko’rib chiqdik. <datalist> — avtomatik to’ldirish tajribasini yaratadi. Keyingi darsda <dd> tegiga o’tamiz.