Cara menggunakan autocomplete javascript from database

Pernahkah Anda membuat fitur autocomplete dalam form yang Anda buat? Jika belum, maka tutorial ini akan membantu Anda dalam membuat fitur tersebut. Gambar di bawah ini akan memberikan illustrasi penggunaan fitur Autocomplete.

Fitur Autocomplete biasa kita temukan di Facebook, dimana saat Anda mengetikkan salah satu huruf dari nama teman Anda, maka nama teman yang memiliki huruf yang cocok akan muncul.

Struktur file latihan

Tutorial ini akan menyediakan source code dasar yang bisa Anda download di link ini: http://www.mediafire.com/?xewi022kll4od09. Anda dapat mendownload source dasar ini secara langsung melalui situs/tautan tersebut. Anda juga bisa mendownload file jQuery asli melalui situs resmisnya di: http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip.

Hasil akhir file tutorial ini bisa didownload di: Download file tutorial akhir Java Web Media Web Design Course Depok..

Langkah awal

Ekstrak file source code tersebut ke dalam web root Anda (saya memakai XAMPP jadi saya membuat folder di dalam folder htdocs dengan nama tutorial). Tutorial ini akan dikerjakan dengan menggunakan Adobe Dreamweaver (minimal CS3).

Sebelum Anda masuk ke dalam tutorial ini, pastikan Anda telah membuat Site Setup/Site Definition. Baca tutorial: Membuat Site Definition di Dreamweaver CS5 untuk lebih jelasnya. Jika proses tersebut Anda gagal, maka Anda tidak dapat melangkah ke step berikutnya.

Upload database dan koneksi database

Di dalam folder db terdapat file database yang akan Anda gunakan dalam latihan kali ini.

1. Buka phpmyadmin yang Anda miliki (http://localhost/phpmyadmin)
2. Buat database baru, dalam contoh ini dibuat database dengan nama tutorial_jquery.
3. Import database yang ada dalam folder db (nama filenya adalah auto_complete.sql).

Koneksi database

Dalam source code yang telah Anda download, telah dibuat file koneksi database dengan nama config.php yang tersimpan dalam folder Connections. Lakukan perubahan jika nama database Anda berbeda dengan yang ada dalam tutorial ini.

Mulai bekerja dengan jQuery AutoComplete

Langkah selanjutnya adalah bekerja dengan jQuery Autocomplete.

1. Buka Adobe Dreamweaver Anda
2. Buka file autocomplete.php yang sudah disertakan dalam source code.
3. Buka file default.html yang tersimpan dalam folder jquery-ui-1.10.3\demos\autocomplete dengan menggunakan Dreamweaver
4. Simpan file default.html tersebut di dalam folder utama, yaitu folder tutorial.
5. Jika ada pertanyaan Update Links? Klik Yes saja.

Berikut hasil akhir dari proses penyimpanan tersebut.

Menyalin link jQuery ke dalam file autocomplete.php

Langkah selanjutnya adalah menyalin link dan kode javascript dari file default.html ke file autocomplete.php. Kode yang harus dicopy adalah kode berikut ini:

Untuk menyalin kode jQuery Autocomplete, berikut langkah-langkahnya:

1. Buka file default.html yang ada dalam folder utama webroot
2. Dengan mode Code View, copy kode baris ke-6 sampai baris ke-44.
3. Buka file autocomplete.php. Setelah baris ke-6, tekan Enter
4. Paste code tersebut di file autocomplete.php pada area kosong tersebut
5. Simpan kembali pekerjaan Anda

Mengubah id (#tags) menjadi id (#cari)

Dalam file autocomplete.php, id yang digunakan untuk mengidentifikasi input bernama cari. Maka Anda harus mengubahnya menjadi yang semula #tags menjadi #cari. Lihat gambar berikut ini:

Membuat recordset untuk menampilkan data yang dicari

Anda perlu membuat recordset untuk menampilkan data institusi yang akan dicari.

Berikut langkah-langkahnya:

1. Buka file autocomplete.php Anda
2. Klik menu Insert > Data Objects > Recordset. Isi data jendela recordset sebagai berikut.
3. Name: rsData
4. Connection: config (nama file koneksi database)
5. Table: auto_complete (nama tabel SQL)
6. Filter: None
7. Sort: Nama, Ascending
8. Klik OK
9. Simpan hasil pekerjaan Anda.

Menampilkan data dari database (tabel MySQL) untuk ditampilkan sebagai Autocomplete

Langkah selanjutnya adalah menampilkan data yang telah dipanggil dengan recordset rsData ke halaman web.

Untuk melakukannya, cari kode berikut ini (berada di antara baris 56 – 78).

“ActionScript”,
“AppleScript”,
“Asp”,
“BASIC”,
“C”,
“C++”,
“Clojure”,
“COBOL”,
“ColdFusion”,
“Erlang”,
“Fortran”,
“Groovy”,
“Haskell”,
“Java”,
“JavaScript”,
“Lisp”,
“Perl”,
“PHP”,
“Python”,
“Ruby”,
“Scala”,
“Scheme”

Ubah kode tersebut menjadi:

“”,

Simpan kembali hasil pekerjaan Anda. Lalu lakukan pengetesan.

Anda telah berhasil membuat fitur Autocomplete

Jika Anda mengikuti tutorial ini dengan detail dan runut, saya yakin Anda dapat menyelesaikan tutorial ini dengan baik.

Note: Tutorial lebih advanced kami berikan kepada siswa yang les/kursus pembuatan web di tempat kami.

Kode final (source code akhir):

Berikut adalah kode akhir dari tutorial ini:

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break; 
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}
mysql_select_db($database_config, $config);
$query_rsData = "SELECT * FROM auto_complete ORDER BY nama ASC";
$rsData = mysql_query($query_rsData, $config) or die(mysql_error());
$row_rsData = mysql_fetch_assoc($rsData);
$totalRows_rsData = mysql_num_rows($rsData);
?>







 
 
 
 
 
 
 
 


 
Latihan Jquery Auto Complete | www.javawebmedia.com
 

 

 Nama institusi (autocomplete)
 
 
 

 
 
 
 
 
More information about the course, visit our website: www.javawebmedia.com | a web design school in Depok