Başlıkta’da belirtildiği gibi HTML5 ile gelen datalist ile input nesnesi için veri listesi hazırlayabilirsiniz örnek olarak range türü için aralık, color için renk listesi, text için otomatik tamamlama gibi özellikleri datalist veri listesi oluşturarak kullanabilirsiniz.
HTML5 Datalist element’i ile birçok input nesnesine veri listesi hazırlama
Otomatik Tamamlama İle Sehir Seçim Listesi
İlk örneğimizi otomatik tamamlama üzerine yapalım HTML5 ile beraber gelen datalist ile şehirler listesi oluşturacağız ve bu listeyi oluşturacağımız input nesnesine bağlayacağız bağlama işlemi için yapmanız gereken oluşturduğunuz datalist için id özelliğine bir değer girmek ve buraya girdiğiniz değeri input nesnesinin list özelliğine girerek otomatik tamamlama özelliğini kullanabilirsiniz.
Şimdi şehirler listesinin bulunduğu bir datalist ve oluşturulan listeyi bağlamak için ise bir input nesnesi oluşturuyoruz.
HTML
1 2 3 4 5 6 7 | <datalist id="sehirler"> <option value="Ankara">Ank.</option> <option value="İstanbul">İst.</option> <option value="Antalya">Ant.</option> <option value="Kocaeli">Koc.</option> </datalist> <input list="sehirler" /> |
Şimdi farklı bir örnek üzerinde duralım farzedelimki mahallelerin olduğu bir listeyi üstteki gibi otomatik tamamlama özelliği şeklinde kullanmak istiyorsunuz fakat türkiyedeki mahalle sayısı 20.09.2014 tarihi itibari ile 31743 adettir bu mahalleleri sayfa yüklendiğinde bir datalist oluşturmak hem sayfaya çok ağır bir yük oluşturacaktır hemde kullanıcı açısından sayfa çok geç açılacaktır bu durumda yapılması gereken kullanıcının girdiği değere göre dinamik olarak üretmek olacaktır böylelikle daha az sonuç gelecektir javascript ile bunu nasıl gerçekleştireceğimizi görelim.
HTML
1 2 3 | <input id="sehir" name="sehir" list="sehirler" placeholder="Şehir adı girin" /> <datalist id="sehirler"> </datalist> |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var sahteSunucuCevabı = ['Ankara', 'İstanbul', 'Antalya', 'Kocaeli']; var datalist = document.getElementById('sehirler'); document.getElementById('sehir').addEventListener('keyup', function () { if (this.value.length === 0) { return; } //Sahte sonucu dönerek değerlere ulaşmaya çalışıyoruz. datalist.textContent = ''; for (var i = 0; i < sahteSunucuCevabı.length; i++) { if (sahteSunucuCevabı[i].toLowerCase().indexOf(this.value) !== 0) { continue; } var option = document.createElement('option'); option.value = sahteSunucuCevabı[i]; datalist.appendChild(option); } }); |
Sonuç
Renk Seçim Listemizi Oluşturma
HTML5 ile gelen özelliklerden biride renk seçimi için giriş nesnesi oluşturabiliyorduk oluşturduğumuz renk seçim girişi ile buton oluşmakta ve üzerinde varsayılan olarak siyah renk geliyordu bu butona tıkladığımızda ise word, paint gibi birçok yazılımda görmeye alışkın olduğunu işletim sisteminin renk seçim paleti geliyor bu paletten seçtiğimiz renk buton üzerinde yer alıyor buton üzerinde seçtiğimiz renge ulaşmak için ise input nesnesinin value özelliğini kullanıyoruz istersek kendimizde value özelliğine varsayılan değerler atayabiliriz. şimdi kendi renk listemizi color türü input nesnesine nasıl tanımlayabileceğimizi görelim.
HTML
1 2 3 4 5 6 7 8 9 | <input type="color" list="renkler" /> <datalist id="renkler"> <option value="#00000"/> <option value="#478912"/> <option value="#FFFFFF" /> <option value="#33FF99" /> <option value="#5AC6D9" /> <option value="#573905" /> </datalist> |
Sonuç
Aralık listesi oluşturma
HTML5 ile beraber gelen yeni input türlerinden biri olan range ile belirtmiş olduğumuz aralıklarda kullanıcılara değer seçtirebiliyoruz. datalist nesnesini kullanarak range türündeki input nesnemiz için bir aralık listesi oluşturacağız.
HTML
1 2 3 4 5 6 7 | <input type="range" value="0" min="0" max="100" list="numaralar" /> <datalist id="numaralar"> <option value="20" /> <option value="40" /> <option value="60" /> <option value="80" /> </datalist> |
