Membuat AutoComplete Ala Google Dengan Jquery

Autocomplete atau kita kenal dengan sebutan AutoSuggest merupakan fitur tambahan dalam suatu form input untuk menampilkan data-data yang sesuai dengan yang diketik oleh user pada suatu form. Contohnya seperti mesin pencari google dihalaman terdepan, ketika kita mengetikkan beberapa huruf atau kata maka akan muncul dibawahnya beberapa kata-kata yang menyambungkan huruf atau kata yang telah kita ketik. Menarik kan?

Tanpa berlama-lama, kita mulai saja tutorial kita kali ini.

Pertama, siapkan tabel kota dengan 2 kolom (id_kota, nama_kota) melalui mysql. Silahkan baca tutorial pembuatan tabel mysql.

Kedua, kita akan menggunakan plugin Autocomplete. Kalau buat sendiri agak ribet dan panjang ceritanya.

Sobat bisa download disini :
Untuk Jquerynya
Untuk Javascriptnya
Untuk CSSnya

Ketiga, silahkan ketik dua buah script berikut :

Skrip kota.php | Download Script

Skrip proses_kota.php

<?php
mysql_connect("username_sobat(baca tutorial koneksi mysql)","password_database_sobat","");
mysql_select_db("nama_database_sobat_sendiri");

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = mysql_query("select nama_kota from kota where nama_kota LIKE '%$q%'");
while($r = mysql_fetch_array($sql)) {
    $nama_kota = $r['nama_kota'];
    echo "$nama_kota \n";
}
?>

Sekarang coba jalankan skrip kota.php, jangan lupa aktifkan dulu server sobat. Pada form Nama Kota, sobat coba ketikkan huruf a. Maka akan muncul dibawahnya beberapa nama kota yang mengandung huruf "a". Sobat bisa memilih nama kota yang disarankan dengan klik maupun menekan enter. WOOW... selamat buat sobat yang berhasil. Silahkan berkreasi melalui file file yang telah sobat download dan sesuaikan dengan kebutuhan website sobat. Sekian dari saya, Wassalam....

as website css source a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html free web how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat css membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.

Share ke Google	"Sobat suka postingan ini? Silahkan copy link dibawah ini dan paste ke web, blog, atau sosial media sobat yang nantinya akan menghubungkan sobat langsung dengan postingan ini. "
<a href="http://ketikweb.blogspot.com/2012/08/membuat-autocomplete-ala-google-dengan-Jquery.html">Membuat AutoComplete Ala Google Dengan Jquery</a>

Untuk mendapat respon balik dari saya, tuliskan identitas sobat dalam memberi komentar dalam kolom dibawah ini.