Teknik Searching Auto Suggest mirip Google dangan PHP, Jquery, dan MySQL

Teknik Searching Auto Suggest mirip Google dangan PHP dan Jquery

Assalamualaikum,

Halaman ini saya buat berawal dari kebingungan saya mau ngapain di kantor, kerjaan sudah beres, Deadline masih cukup lama, mau update Twitter yang baru juga gk minat (Abisnya follower cuman Satu Hiks, Twitter yg lama dibanned) barang kali ada yang nyumbang Follow ke saya.. hehe @septiyo_21

Oke langsung saja, to the point, fasilitas search / pencarian pada sebuah applikasi adalah sesuatu yang penting, berawal dari keinginan saya membuat aplikasi seperti Mbah Google auto Suggest, yg belum tahu auto suggest adalah, jika kita mengetik 1 huruf saja, maka pencarian secara otomatis akan dilakukan perhuruf. Keren banget.

Q:Kenapa memakai Jquery
A:Karena Lebih mudah tinggal download pasang, edit dikit, coba sampai bisa, dan jalan

Itulah Jquery, penjelasan singkat Jquery adalah Sekumpulan Library siap pakai yang aslinya berisi script yang sangat teramat panjang, dan saya yakin jika dikerjakan sendiri oleh programmer nubie seperti saya akan memakan waktu sangat lama (Tiwas Henk :D) dengan Moto Jquery “Write Less Do More” memang sangat cocok dalam pemrograman web.

jika anda ingin belajar lebih banyak dan tentang Jquery langsung kunjungi saja halamannya. gratis kok di sini

Oke langsung silahkan anda membuat halaman index.php berikut scriptnya

<html>
<head>

<script type=”text/javascript” src=”js/jquery-1.9.1.js”></script>
<script type=”text/javascript” src=”js/jquery-1.2.1.pack.js”></script>
<script type=”text/javascript”>
function lookup(a)
{
if(a.length==0){$(“#suggestions”).hide()
}
else
{
$.post(“carinama.php”,{queryString:””+a+””},
function(b){if(b.length>0)
{
$(“#suggestions”).show();$(“#autoSuggestionsList”).html(b)}
}
)
}
}function fill(a){$(“#inputString”).val(a);setTimeout(“$(‘#suggestions’).hide();”,200)}
</script>
<style type=”text/css”>
.suggestionsBox{
position:relative;
left:30px;
margin:0 auto;
width:300px;
background-color:#212427;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border:2px solid #000;
color:#fff}
.suggestionList{
margin:0;
padding:0}
.suggestionList
li{
margin:0 0 3px 0;
padding:3px;
cursor:pointer}
.suggestionList
li:hover
{
background-color:#659cd8}
.tengah{
margin:0 auto;padding-top:10px;
padding-left:310px;
font-family:Helvetica;
font-size:14px}
.judul{padding-left:390px;
font-family:Helvetica,Geneva,sans-serif}
</style>

<table border=”0″ align=’center’>
<tr><td>
<form method=”POST” action=”index.php”>
<input type =’text’ name = ‘KUNCI’ placeholder=”Inputkan Nama Disini” id=”inputString” onkeyup=”lookup(this.value)” onblur=”fill()”>
<input type =’submit’ name = ‘CARI’ value=’CARI’>
<font style=”font-size:12px”><br><!–b>Mencari Data 1 Bulan = “01/2013″</b–></font>

<font style=”font-size:12px”><br><!–b>Mencari Berdasarkan tanggal Format = “05/11/2012″<br>
Mencari Data 1 Bulan = “01/2013″</b–>
</font>
<div class=”suggestionsBox” id=”suggestions” style=”display:none”>
<img src=”upArrow.png” style=”position:relative;top:-12px;left:30px” alt=”upArrow” />
<div class=”suggestionList” id=”autoSuggestionsList”>
 
</div>
</div>
</td></tr>
</form>
</table>

<?php

include “koneksi.php”;

//echo “<a href=’input.php’>Add New data</a>”;

if(isset($_POST[CARI]))
{
$nama = $_POST[KUNCI];
$sql = “SELECT * FROM mahasiswa WHERE nama = ‘$nama'”;

}
else
{

$sql = “SELECT * FROM mahasiswa”;//-> ini query untuk select satu tabel. yaitu tabel mahasisiwa
}

//$sql = “SELECT * FROM mahasiswa”;//-> ini query untuk select satu tabel. yaitu tabel mahasisiwa
$hasil = mysql_query($sql);

$warnaGenap = “#FFFFF”; // warna abu-abu
$warnaGanjil = “#CEF6F5”; // warna putih
//$warnaHeading = “#66CC00”; // warna merah untuk heading tabel

echo “<table align=center border=1 cellpadding=2 cellspacing=0><tr>”;
echo “<tr bgcolor = ‘##F6CECE’><td align=’center’ colspan=’3′><b>Data Mahasiswa<b></td></tr>”;
echo “<th>Nama</th>”;
echo “<th>Jurusan</th>”;
echo “<th>Email</th>”;
echo “<tr>”;
$no=0;
WHILE($data = mysql_fetch_array($hasil)){

if ($no % 2 == 0) $warna = $warnaGenap;
else $warna = $warnaGanjil;

echo “<tr bgcolor=’.$warna’>”;
echo “<td>$data[nama]</td>”;
echo “<td>$data[jurusan]</td>”;
echo “<td>$data[email]</td></tr>”;

$no++;

}
echo “</table>”;

?>

</body>
</html>

Anda tinggal copy paste saya di editor anda, asal sudah ada database, maka insyallah bisa langsung jalan.]
Jika anda males ngetik, silahkan download sourcenya, (Kurang Gampang Gimana Coba :p)

Download

atau

Download2

Cukup kiranya tutorial dari saya, yang ingin praktik langsung dwonload saja, import databasenya, copy folder ke folder htdocs anda dan jalankan. Anda bisa ubah-ubah sendiri Scriptnya, jika ada yang bingung, jangan sungkan untuk bertanya, karena malu bertanya Susah Dijalan. hehehe apalagi Ngoding. 😛

Wassalamualaikum..

10 replies on “Teknik Searching Auto Suggest mirip Google dangan PHP, Jquery, dan MySQL”

Wah keren nih buat belajar

Oke Gan 😀

Terimakasih mas, fitur auto suggest ini ingin saya terapkan di website saya.

Ok Mas, silahkan 😀

Mas ini mirip auto sugest yang di lazada?

Saya kurang tahu yang dilazada seperti apa, tapi rata2 autosuggest ya seperti itu Gan :D, ketik 1 huruf maka si Ajax akan searching berdasarkan huruf tersebut. Lalu menampilkan Suggestnya 😀