Pada tutorial kali ini,
adalah contoh penggunaan tag HTML5 yaitu <datalist> yang berfungsi
sebagai daftar opsi untuk nilai input. Pada contoh ini, saya akan memberikan
sebuah skrip berupa cara membuat form autocomplete dengan field text input
menggunakan tag datalist. Dalam pembuatan autocomplete ini, tidak memerlukan
sebuah database seperti pada umumnya digunakan oleh AJAX AutoComplete. Contoh
penerapan autocomplete ini, bisa anda lihat di Facebook pada bagian cari
(search), maka akan muncul beberapa list dibawah form input yang berdasarkan
pada keyword anda. Oke, tanpa basa basi lagi, untuk mengetahuinya silahkan
membuat buat nama file yaitu autoComplete.html. Lalu, terapkan skrip dibawah
ini :
<DOCTYPE! html>
<html>
<head>
<title>Belajar AutoComplete dengan HTML5</title>
</head>
<body>
Pilih Kota :
<input type="text" name="cari" id="cari" list="datalist" />
<datalist id="datalist">
<option value="Medan"></option>
<option value="Jakarta"></option>
<option value="Bandung"></option>
<option value="Surabaya"></option>
<option value="Yogyakarta"></option>
<option value="Padang"></option>
<option value="Palembang"></option>
</datalist>
</body>
</html>
Penjelasan skrip :
·
<input
type="text" name="cari" id="cari"
list="datalist" /> digunakan untuk membuat sebuah input form yang
memiliki id datalist untuk menampung sebuah argument atau nilai.
·
<datalist
id="datalist"> sebagai membuat list dari form inputan diatas.
·
<option
value="Medan"></option> digunakan untuk sebagai opsi yang
memiliki sebuah value.
Jika
anda telah menerapkan skrip diatas tadi, maka akan hasilnya seperti gambar
dibawah ini :
Mungkin sampai disini
tutorial Cara membuat Autocomplete dengan HTML5 yang saya berikan, semoga dapat
bermanfaat. Silahkan berkomentar jika anda belum memahaminya. Terima kasih :D