Tutorial Membuat Datalist dengan HTML5 dan CSS (Source Code)

Pernahkan kamu mengisi sebuah form pada website dan ketika kamu mengetik muncul list berisi sugesti apa yang akan kamu ketikan?
Pada tahun tahun sebelumnya fungsi tersebut menggunakan dibuat mengyunakan JavaScript, sekarang kamu dapat melakukannya dengan HTML5 <datalist> tentu saja menggunakan HTML jauh lebih mudah ketimbang JavaScript. Jadi Unsur <datalist> digunakan untuk memberikan fitur “AutoComplete” pada elemen <input>. User akan melihat list atau daftar pilihan secara drop down yang telah ditentukan sebagai input data mereka.
Contoh di bawah adalah list daftar atau list nama nama kota mennggunakan <datalist> dan mempunyai ID city. Jadi dengan menggunakan <datalist>, daftar kota-kota tersebut akan muncul saat kita sedang mengisi form seperti gambar dibawah ini.

Karena itu pada atrtikel ini saya akan menerapkan fungsi <datalist> pada HTML5.

So what we need?

Pertama, buat script untuk membuat form input dan datalist, saya beri nama index.html

index.html
<datalist id="city">
<option value="Anyer">
</option><option value="Ambarawa">
</option><option value="Bandung">
</option><option value="Banjar">
</option><option value="Bantul">
</option><option value="Bogor">
</option><option value="Ciamis">
</option><option value="Cianjur">
</option><option value="Cibonong">
</option><option value="Depok">
</option><option value="Garut">
</option><option value="Gresik">
</option><option value="Jakarta">
</option><option value="Jember">
</option><option value="Kediri">
</option><option value="Klaten">
</option><option value="Pacitan">
</option><option value="Pare">
</option><option value="Tuban">
</option><option value="Wates">
</option><option value="Wonogiri">
</option>
</datalist>


Kedua, saya akan buat script CSSnya , sekedar untuk mempercantik formnya, namun tanpa script ini fungsi <datalist> pada file index.html sudah dapat berjalan
script style.css

body {
background-color: #f9f9f9;
}
.demo-wrapper {
width: 550px;
margin: 50px auto 0;
}
.destination-form {
box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .2);
}
.destination-city {
padding: 30px 15px;
border-radius: 0px 0px 3px 3px;
background-color: #fff;
}
.destination-title {
margin: 0;
font-family: sans-serif;
color: #fff;
font-size: 1em;
padding: 0 15px;
height: 35px;
line-height: 38px;
background: red;
font-weight: normal;
border-radius: 3px 3px 0px 0px;
}
.destination-city input[type=text] {
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, .2);
background-color: #fff;
padding: 0 5px;
height: 30px;
font-size: 0.8em;
width: 200px;
line-height: 30px;
float: left;
margin-right: 4px;
}
.destination-city button {
background: #39a2d6;
height: 30px;
border-radius: 2px;
background-color: #34a7e8;
font-weight: bold;
border: 1px solid #4780b2;
color: #fff;
padding: 0px 20px;
}

Hasil dari scriptnya saat dijalankan seperti ini

Seperti yang kamu lihat, saat saya mengetikan huruf b, maka akan muncul opsi secara dropdown kota-kota dengan awalan huruf b juga.

Membuat datalist menggunakan HTML5 selain lebih mudah, website pun  jadi tidak berat karena tidak harus load Javascript.

Ok semoga tutorial ini dapat berguna.

Download

Share on Google Plus

About kodekidi

KodeKidi.com Situs Tutorial Pemograman Berbahasa Indonesia