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>
·
<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
Hi... Perkenalkan nama saya Ramses Putra Sianturi. Saya blogger yang masih pemula mohon dukungan dan kritik serta masukannya.
4 komentar
Click here for komentarWah mantap juga tuh... saya terapkan dulu deh..
ReplyOke dan, terima kasih atas kunjungannya
ReplyBegitu Saktinya HTML5
Replywah artikel yang sangat bermanfaat, saya juga menulis artikel yang serupa dengan kumpulan source kodenya http://bit.ly/1klQfu1
Reply1. Tinggalkan Komentar Yang Positif, Kritik, dan Tidak Menjatuhkan!
2. Gunakan Emoticon yang sesuai dan tulis kode nya di kolom komentar!
3. Berkomentarlah sesuai dengan topik yang dibicarakan!
4. No SARA, kata - kata tidak sopan, berbau pornografi, LINK AKTIF tidak akan di approve !
5. Komentar anda akan di tampilkan setelah disetujui . ConversionConversion EmoticonEmoticon