Cara Membuat AutoComplete Menggunakan HTML5 - Salam semua sahabat blogger, kali ini saya akan memberikan tutorial yang sederhana mengenai HTML5. Dimana kita akan membuat autocomplete dengan bahasa pemrograman ini. Autocomplete biasanya diterapkan pada fitur search seperti Facebook, Google, Yahoo, atau search engine lainnya. Pada umumnya autocomplete ini dibuat dengan Javascript atau Ajax dan menggunakan database untuk menyimpan datanya. Tapi disini hanya menggunakan HTML5 untuk pengetahuan dasar saja.
Langsung saja, kita akan menjalankan autocomplete ini ke halaman html. Jadi pertama buat file dengan nama autocomplete.html. Lalu buat tag dasar dari html seperti dibawah berikut.
<!DOCTYPE html>Script diatas merupakan tag dasar dari html, saya harap anda dapat memahaminya. Oke, perintah HTML5 yang saya gunakan ialah <datalist> dimana perintah ini ialah merupakan daftar opsi untuk nilai input. Untuk memahaminya, coba masukkan script dibawah di antara tag <body></body>.
<html>
<head>
<title>Belajar HTML5</title>
</head>
<body>
</body>
</html>
<h2>Tutorial Membuat Autocomplete menggunakan HTML5</h2>Seperti yang anda lihat, perintah hampir sama ya dengan tag <select> :D. Nah, pada perintah option ada valuenya tuh yang bakalan tampil ketika anda melakukan sebuah inputan pada form input nantinya. Saya harap anda paham dengan script diatas. Dan berikut script secara keseluruhnya :
<small><a href="http://www.bahasaprogram.com">By : www.bahasaprogram.com</a></small><br>
<input type="text" name="cari" list="list1">
<datalist id="list1">
<option value="Amerika Serikat">
<option value="Afganistan">
<option value="Australia">
<option value="Indonesia">
<option value="Inggris">
<option value="India">
<option value="Malaysia">
<option value="Rusia">
<option value="Swiss">
</datalist>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML5</title>
</head>
<body>
<h2>Tutorial Membuat Autocomplete menggunakan HTML5</h2>
<small><a href="http://www.bahasaprogram.com">By : www.bahasaprogram.com</a></small><br>
<input type="text" name="cari" list="list1">
<datalist id="list1">
<option value="Amerika Serikat">
<option value="Afganistan">
<option value="Australia">
<option value="Indonesia">
<option value="Inggris">
<option value="India">
<option value="Malaysia">
<option value="Rusia">
<option value="Swiss">
</datalist>
</body>
</html> 
Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.
2 comments
Click here for commentsSaya baru tahu kalau html 5 bisa buat auto complete, sugoi ^^ :ng
ReplyYa bg, tapi yang sangat sederhana tentunya bg.
ReplyConversionConversion EmoticonEmoticon