Mengapa AUTO SUGGEST harus menggunakan Javascript, apakah auto suggest tidak cukup hanya dengan HTML,PHP dan MySQL? Jawabannya jelas tidak cukup, karena AUTO SUGGEST memerlukan sebuah proses tanpa harus melakukan Refresh browser. Karenanya kita butuh Javascript dalam hal ini jQuery untuk kemudian ditanamkan pada event - event seperti onclick, onkeypress, onmouseover dan lain - lain.
Dari konsep dasar diatas, mudah - mudahan sudah dapat dipahami bagaimana prinsip dasar sebuah AUTO SUGGEST, selanjutnya mari kita buat contoh scriptnya satu persatu
Karena kuta menggunakan jQuery AJAX, maka kita juga harus memasukkan jQuery pada script HTML seperti terlihat pada script index.php dibawah ini. Pada contoh kali ini, kami menggunakan jquery-1.7.2.min.js, versi yang tersedia sekarang mungkin sudah lebih tinggi dari yang kami gunakan, dan hal tersebut tidak akan menjadi masalah dalam menjalankan contoh script kita
1. Membuat Form utama untuk menjalankan AUTO SUGGEST » index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Script Auto Suggest Sederhana dengan jQuery - Media Kreatif</title>
<style>
fieldset{margin-bottom: 1em;width:300px;}
input{display: block;margin-bottom: .25em;}
#suggest{position:absolute;z-index:5;border-left:silver 1px solid;padding:0 0 0 10px;}
span.pilihan{display:block;cursor:pointer;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script src="prmajax.js"></script>
</head>
<body>
<form>
<fieldset>
<table>
<tr>
<td>Kota Kelahiran</td>
<td><input id="src" type="text" onkeypress="suggest(this.value);" placeholder="Tulis nama kota"><div id="suggest"></div></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Form diatas merupakan form HTML biasa, point utama yang harus kita perhatikan paa script diatas adalah :- Kita harus memanggil script jQuery dan Javascript function untuk auto suggest seperti terlihat pada script index.php baris ke 12 dan 13
-
Form Kota Kelahiran yang mempunya event onkeypress, yang kemudian memanggil fungsi suggest pada script prmajax
<input id="src" type="text" onkeypress="suggest(this.value);" placeholder="Tulis nama kota">
-
TAG DIV dengan id suggest yang nantinya akan mencul sebagai media AUTO SUGGEST
<div id="suggest"></div>
2. Javascript function dengan jQuery AJAX » prmajax.js
//Fungsi untuk autosuggest
function suggest(src)
{
var page = 'suggest.php';
if(src.length>=2){
var loading = '<p align="center">Loading ...</p>';
showStuff('suggest');
$('#suggest').html(loading);
$.ajax({
url: page,
data : 'src='+src,
type: "post",
dataType: "html",
timeout: 10000,
success: function(response){
$('#suggest').html(response);
}
});
}
}
//Fungsi untuk memilih kota dan memasukkannya pada input text
function pilih_kota(kota)
{
$('#src').val(kota);
}
//menyembunyikan form
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
Pada script diatas terdapat beberapa function yang nantinya akan digunakan dalam proses autosuggest. Antara lain :- Function suggest » merupakan function yang dipanggil oleh form Kota Kelahiran, function ini selanjutnya akan mengirimkan text pada script PHP, selanjutnya respon dari script suggest.php akan dimasukkan pada TAG DIV dengan id suggest pada script index.php. Sehingga TAG DIV akan muncul dan menampilkan daftar kota yang sesuai dengan kata yang ditulis oleh user. Function ini akan mengirinkan text yang dituliskan oleh user secara POST pada script suggest.php
- Function pilih_kota » merupakan function yang akan memasukkan nama kota yang di click oleh user pada form kelola kota.
- Function hideStuff » merupakan function yang digunakan untuk menyembunyikan TAG DIV AUTO SUGGEST pada saat salah satu nama kota di click oleh user
3. Membuat script PHP untuk melakukan pencarian ke Database MySQL » suggest.php
<?php
$con = mysql_connect('localhost','root','kutukupret');
$db = mysql_select_db('tutorial',$con);
$src = addslashes($_POST['src']);
$query = mysql_query('select * from kota where Kota like "'.$src.'td_persen" ');
while($data=mysql_fetch_array($query)){
echo '<span class="pilihan" onclick="pilih_kota(\''.$data['Kota'].'\');hideStuff(\'suggest\');">'.$data['Kota'].'</span>';
}
?>
Script diatas merupakan script PHP biasa yang akan menjalankan Query
pencarian nama kota yang mirip dengan yang ditulisakan oleh user pada
form Kota Kelahiran. Script ini akan menerima data POST yang dikirimkan
oleh function suggest yang terdapat pada script prmajax.js dan
selanjutnya menjalankan query pencarian. Data hasil pencarian
selanjutnya akan ditampilkan dalam bentuk pilihan dimana user dapat
memilih data mana yang dianggap sesuai dengan Kota Kelahirannya. Masing -
masing pilihan akan memanggil function pilih_kota dan function
hideStuff yang ditanamkan pada event onclick, sehingga ketika user click
pada salah satu nama kota, maka function pilih_kota dan function
hideStuff tersebut akan dijalankan oleh browserPada contoh script diatas, kami juga sertakan contoh script yang sudah kami buat beserta struktur databasenya, silahkan Download contoh script AUTO SUGGEST yang sudah kami buat pada link download di bagian bawah.
Sekian dulu tutorial auto suggest kali ini, semoga uraian penjelasan script diatas dapat dipahami oleh pembaca Media Kreatif.
Salam Kreatif
Download dan pelajari script diatas pada link download dibawah ini:
Download script AUTO SUGGEST
No comments:
Post a Comment