HTML5 Datalist Etiketi

[DumanInc]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Çoğu web uygulamasında karşılaşmışsınızdır. Bir kaç karakter girdiğimizde bize yazılabilecek metinleri getirmektedir. Her javascript frameworkün otomatik tamamlama özelliği vardır. Bu yazıda bunların dışında HTML5 ile gelen datalist etiketi açıklayıp, basit autocomplete özelliği kazandıracağız.

Datalist: <datalist> bir ID ve içinde listelenecek her nesne için OPTION etiketi ve bu etiketlere ait value değerlerini almaktadır.

1 2 3 4 5 6 7 8 9 10 11

<datalist id="dersler"> <option value="Web Tasarımı"> <option value="Programlama"> <option value="Veritabanı"> <option value="Veritabanı Organizasyonu"> <option value="Nesne Tabanlı Programlama"> <option value="Bilişim Teknolojileri"> <option value="Elektronik"> </datalist>

Datalist tanımladıktan sonra kullanılacak etikete belirlediğimiz ID değeri list niteliğine girilmesi yeterli olacaktır.

1 2 3

<input type="text" name="ders1" list="dersler">

Text kutusunda bir kaç har girmeye başladığımızda eşleşen kayıtlar listelenecektir. Jquery yada JS frameworklerdeki kadar görsel açıdan mükemmel görünmeyebilir. Ama kullanımı ve ihtiyaç duyduğu kaynak bakımından çok işlevsel bir etiket.

Destekleyen Tarayıcılar

Chrome	Internet Explorer	FireFox	Safari	Opera
20.0+	10.0+	4.0+	Desteklemiyor	9.0+

Faydalanılan Kaynaklar​

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.