Membuat Pencarian Facebook dengan jQuery, Ajax dan PHP

Facebook merupakan salah satu jejaring sosial yang cukup populer. Jejaring sosial ini pun memiliki keunikan tersendiri bagi penggunanya. Tentu kita pernah bertanya, bagaimana pencarian facebook dibuat. Berikut merupakan tutorial sederhana membuat pencarian facebook menggunakan jQuery, Ajax dan PHP.

Download

Demo

Langkah 1

Buatlah sebuah database disertai dengan tabel user seperti ketentuan dibawah ini.

CREATE TABLE data_user (
   iduser INT AUTO_INCREMENT PRIMARY KEY,
   namadepan VARCHAR(25),
   namabelakang VARCHAR(25),
   negara VARCHAR(25),
   foto VARCHAR(50)
);

Kemudian, lakukan koneksi ke database. Anda dapat mengedit file config.php untuk merubah settingan informasi database yang terdapat pada source code.

Baca Juga : Cara Membuat Database MySQL

Langkah 2

Buatlah file index.html (contoh) untuk membuat kotak pencarian facebook dan mengisinya dengan syntax jQuery. Berikut contohnya.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".search").keyup(function()
{
var kotakpencarian = $(this).val();
var dataString = 'searchword='+ kotakpencarian;
if(kotakpencarian=='')
{}
else
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#hasilpencarian").html(html).show();
}
});
}return false;
});
});
jQuery(function($){
$("#kotakpencarian").Watermark("Cari");
});
</script>
 
<input id="kotakpencarian" class="search" type="text" /></pre>
<div id="hasilpencarian"></div>
<pre>

Langkah 3

Buatlah file search.php (contoh). File ini digunakan untuk menampilkan hasil pencarian yang diambil dari database.

<?php
include('config.php');
if($_POST){
    $q=$_POST['searchword'];
 
    $sql_res=mysql_query("select * from data_user where namadepan like '%$q%' or namabelakang like '%$q%' order by iduser LIMIT 5");
    while($row=mysql_fetch_array($sql_res)){
    $namadepan=$row['namadepan'];
    $namabelakang=$row['namabelakang'];
    $foto=$row['foto'];
    $negara=$row['negara'];
 
    $re_namadepan='<b>'.$q.'</b>';
    $re_namabelakang='<b>'.$q.'</b>';
 
    $final_namadepan = str_ireplace($q, $re_namadepan, $namadepan);
 
    $final_namabelakang = str_ireplace($q, $re_namabelakang, $namabelakang);
?>
<div class="kotak_hasilpencarian" align="left">
    <img src="foto_user/<?php echo $foto; ?>" style="width:25px; float:left; margin-right:6px" />
    <?php echo $final_namadepan; ?>&nbsp;<?php echo $final_namabelakang; ?><br/>
    <span style="font-size:9px; color:#999999"><?php echo $negara; ?></span></div>
 
<?php
    }
}else{
 
}
?>

Langkah 4

Berikan style CSS pada tampilan pencarian di file index.html yang sudah dibuat.

*{margin:0px}
#kotakpencarian
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#hasilpencarian
{
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.kotak_hasilpencarian
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}
.kotak_hasilpencarian:hover
{
background:#3b5998;
color:#FFFFFF;
}