Mungkin
kita pernah melihat pada sebuah website yang pernah kita kunjungi, pada
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.
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
Buatlah file index.php dan proses.php
pada file index.php letakkan script berikut diantara tag <HEAD> ... </HEAD>
<script type="text/javascript" src="jquery-1.4.js"></script>Penjelasan dari script di atas
<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" />
<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>
$("#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) {hasil dari komponen dengan id "siswa" akan dimasukkan ke komponen dengan id "pilihan".
$('#pilihan').html("<p>Anda memilih Siswa : " + formatted + "</p>");
});
dan diantara tag <BODY> ... </BODY> letakkan script berikut ini :
<div class="demo" style="width: 250px;">pada file proses.php tuliskan script berikut :
<div><p>Nama Siswa : <input type="text" id="siswa" onclick="this.focus();this.select();"></p></div>
</div>
<div id="pilihan"></div>
<?php
mysql_connect("localhost","root","");
mysql_select_db("siswa_db");
$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 !!!
Originally Posted By : Suwondo.NET
Kalo misal di buat jadi dua inputan tapi masi dalam 1 form yg sama
BalasHapusmisal
1. textinput ngambil dari tabel A
2. textinput ngambil dari tabel B
taroh kasusnya input pertama pemilihan negara dari tabel negara dan input ke dua pemilihan kota dari tabel kota/provinsi...
bagaimana solusinya bozz?
yang penah saya bikin yaitu nambahin scrip di atas (clon codinng) tapi kurng efektif kayanya terlalu banyak file .php untuk proses datanya per masing" tabel