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 berupacara 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>
· <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
sumber : http://bahasa-programs.blogspot.com/2015/02/Cara-Membuat-AutoComplete-dengan-HTML5.html
Tidak ada komentar:
Posting Komentar