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ü :
Temel kullanımı bu şekilde.Safari dışında şuan tüm tarayıcılar destekliyor.
UstaDerslik
