Mungkin kita pernah melihat pada sebuah website yang pernah kita kunjungi, saat menuliskan sebagian teks pada inputan akan keluar semacam suggest atau beberapa data yang muncul sesuai dengan kata yang kita ketikkan tadi. nah bagi yang belum tau nama nya, ini disebut AutoComplete. contoh penampakan nya kayak gini :
Pada pembahasan kali ini kita mencoba membuat AutoComplete dengan memanfaatkan modul jQuery.autocomplete, file libary yang dibutuhkan adalah :
1. jquery-1.4.js
2. jquery.autocomplete.css
3. jquery.autocomplete.js
Langkah – langkah nya adalah pertama kita buat file index.php. Pada file index.php kita letakkan script berikut diantara tag <HEAD> … </HEAD>
<script type="text/javascript" src="jquery-1.4.js"></script> <script type='text/javascript' src='jquery.autocomplete.js'></script> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /> <link rel="stylesheet" href="main.css" type="text/css" /></pre> <script type="text/javascript"> $().ready(function() { $("#siswa").autocomplete("proses.php", { width: 150 }); $("#siswa").result(function(event, data, formatted) { $('#pilihan').html("<p>Anda memilih Siswa : " + formatted + "</p>"); }); }); </script>Penjelasan dari script diatas adalah :
$("#siswa").autocomplete("proses.php", { width: 150 });komponen dengan id “siswa” dideklarasikan fungsi autocomplete dengan mengambil data dari file “proses.php” , parameter width:150 memberikan hasil data yang ditampilkan dari autocomplete sepanjang 150 px (piksel).
$("#siswa").result(function(event, data, formatted) { $('#pilihan').html("<p>Anda memilih Siswa : " + formatted + "</p>"); });hasil dari komponen dengan id “siswa” akan dimasukkan ke komponen dengan id “pilihan”.
dan diantara tag <BODY> … </BODY> letakkan script berikut ini :<div class="demo" style="width: 250px;"> <div><p>Nama Siswa : <input type="text" id="siswa" onclick="this.focus();this.select();"></p></div> </div> <div id="pilihan"></div>Langkah kedua buat file proses.php tuliskan script berikut :
<?php mysql_connect("localhost","root",""); mysql_select_db("siswa_db");</pre> $q = strtolower($_REQUEST["q"]); if (!$q) return; ?>isi dari file proses.php yaitu melakukan query data berdasarkan keyword kiriman dari index.php yang diketikkan.
Simpan kedua file nya (index.php dan proses.php) dalam satu folder beserta library nya misal nama folder nya : autocomplete
jalankan dari browser, http://localhost/autocomplete
Untuk script lengkapnya dapat di download :Download Source Code Contoh AutoComplete
Selamat mencoba !!!