Ç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
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
http://www.w3schools.com/tags/tag_datalist.asp
http://html5doctor.com/html5-custom-data-attributes/
