Saya yakin anda semua pengguna internet pernah membuka sebuah search engine, seperti google, bing atau yang lainnya.
Saat anda mengetikan sebuah kata, akan munclu beberapa saran pencarian secara otomatis tanpa harus menekan tombol enter. Nah, kali ini saya akan membuat sebuah tutorial untuk membuat sebuah autocomplete dengan Ajax dan PHP.
1. Buat sebuah database dengan nama "longscripts", kemudian buat tabel "negara" dengan struktur sebagai berikut :
CREATE TABLE `negara` ( `nama` varchar(50) NOT NULL, PRIMARY KEY (`nama`) )2. Sekarang, buat sebuah file php bernama "index.php", berikut ini struktur syntaxnya :
<!DOCTYPE html>
<html>
<head>
<script>
function pencarian(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("hasilcari").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","cari.php?q="+str,true);
xmlhttp.send();
}
//membuat fungsi, saat kata yang muncul diklik, maka akan mengisi kotak isian otomatis
function isi(kata){
document.getElementById("q").value = kata;
document.getElementById("hasilcari").style.visibility = "hidden";
document.getElementById("hasilcari").innerHTML = "";
}
</script>
<title>Pencarian | Longscripts.blogspot.com</title>
</head>
<body>
<table align="center">
<form>
<tr>
<td><h4>Cari negara : </h4></td>
<td><input type="text" onkeyup="pencarian(this.value)" placeholder="Ketik nama negara, dan klik salah satu hasil.." style="width:100%;" id="q"></td>
</tr>
</form>
<tr>
<td> </td>
<td><div id="hasilcari"></div></td>
</tr>
</table>
</body>
</html>
3. Untuk pemroses datanya, kita buat sebuah file "cari.php"
<ul style="border:solid #CCCCCC 1px; margin-top:-15px;">
<?php
mysql_connect('localhost','root','');
mysql_select_db('longscripts');
$q=mysql_real_escape_string($_GET["q"]);
if($q==''){
echo "";
}
else {
$selek=mysql_query("select * from negara where nama LIKE '$q%'");
$jumlah=mysql_num_rows($selek);
if($jumlah>=1){
while($data=mysql_fetch_array($selek)){
echo '<li onClick="isi(\''.$data[0].'\');" style="cursor:pointer;"><b><a>'.$data[0]."</a></b>";
}
echo "</ul>";
}
else {
echo "<b>Tidak ada hasil</b>";
}
}
?>
Simpan kedua file diatas di folder htdocs anda.
Silahkan dicoba :D
Untuk file yang sudah jadi, silahkan klik link download di bawah
mohon update ke koneksi PDO
ReplyDelete