HTML5 Ders-7 Datalist Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Ders-7 Datalist Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2234)
RAPOR ET
Html5 derslerimize devam ediyoruz.Bu derste datalist tagını anlatacağım.Datalist oluşturduğumuz inputlara veritabanı niteliğinde select tagı gibi açılan veriler atar.Örneği incelediğinizde daha iyi anlarsınız.

<datalist id="liste-1">
<option>Eleman-1</option>
<option>Eleman-2</option>
<option>Eleman-3</option>
<option>Eleman-4</option>
<option>Eleman-5</option>
</datalist>

datalist tagı açıp içine option tagı ile verilerimizi giriyoruz.Daha sonra bir input yaratarak buna list="id_ismi" şeklinde verileri atıyoruz.İnputa odaklanıldığında veya her hangi bir kelime yazıldığında veriler filtrelenerek karşımıza gelir.Otomatik tamamlama gibi bir sistem yapılabilir.Jquery ile anlık harf girişini kontrol edip ajaxla veri çekip datalist içine atanabilir.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
input{outline:none;border:1px solid #ddd;}
</style>
</head>
<body>

<input type="text" list="liste-1" />

<datalist id="liste-1">
<option>Eleman-1</option>
<option>Eleman-2</option>
<option>Eleman-3</option>
<option>Eleman-4</option>
<option>Eleman-5</option>
</datalist>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/asd1s85df4f.png

Temel kullanımı bu şekilde.Safari dışında şuan tüm tarayıcılar destekliyor.




chimmetoglu
chimmetoglu 2 Yıl Önce Cevaplandı
Merhabalar,
Ben verileri database'den alarak yapmak istiyordum. En az 2 input alanı olacaktı.
Kodları buraya yazmıştım fakat 2000 karakter sorunu olduğundan silmek zorunda kaldım.
databasedeb aldığında ve iki input olduğunda datalist tekli çalışıyor. Veri girilen input eski değerdeki input verisini siliyordu.
Bunu nasıl çözebiliriz.
Teşekkürler
Cemal Himmetoğlu



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol