Beranda
cari
Facebook

SCRIPT PENCARIAN DI FACEBOOK

Mungkin umumnya script pencarian adalah script pencarian di google atau google search. Kali ini saya mau share script pencarian facebook, script ini tinggal copy paste tinggal kamu ikuti langkahnya sebagai berikut. 

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.

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;
}
Baca Juga

Posting Komentar