Membuat auto search cari teman ala facebook….

Udah lama gak posting tulisan maklum lagi “sibuk” mau ngejar pake baju toga tau toga siapa yang mau gw kejar🙂

back to artikel…

sesuai dengan judul ane mau share sedikit gimana caranya membuat auto suggest seperti facebook…itu loh kalo kita mau cari teman kita di facebook

facebokkayo kita mulai….

1. langkah pertama membuat tabel di phpmyadmin….

CREATE TABLE test_user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
tabel ini nanti digunakan untuk memanggil data  yang kita ketikkan di input search….
2. langkah yang kedua
//auto.html
// <![CDATA[
javascript” src=”jquery.js”>
// ]]>
</script>
$(document).ready(function(){
$(“.search”).keyup(function()
{
var searchbox = $(this).val();
var dataString = ‘searchword=’+ searchbox;
if(searchbox==”)
{}
else
{
$.ajax({
type: “POST”,
url: “search.php”,
data: dataString,
cache: false,
success: function(html)
{
$(“#display”).html(html).show();
}
});
}return false;
});
});
</script>

<input type=”text”color: blue;”>search” id=”searchbox” />

<div id=”display”>

</div>
untuk mendapatkan jquery.js klik disini http://code.jquery.com/jquery-1.5.1.min.js lalu simpan didalam folder yang sama dengan nama jquery.js
3.dan langkah yang terakhir
//search.php
php
include(‘config.php’);
if($_POST)
{
$q=$_POST[‘searchword’];
$sql_res=
mysql_query(“select * from test_user_data where fname like ‘%$q%’ or lname like ‘%$q%’ order by uid LIMIT 5”);
while($row=mysql_fetch_array($sql_res))
{
$fname=$row[‘fname’];
$lname=$row[‘lname’];
$img=$row[‘img’];
$country=$row[‘country’];
$re_fname='<b>’.$q.'</b>’;
$re_lname='<b>’.$q.'</b>’;
$final_fname = str_ireplace($q, $re_fname, $fname);
$final_lname = str_ireplace($q, $re_lname, $lname);?>
<divcolor: blue;”>display_box” align=”left”>
<img src=”user_img/
php echo $img; ?>” />
php echo $final_fname; ?>&nbsp;
<?php echo $final_lname; ?><br/>
<?php echo $country; ?>
</div>
<?php
}
}
else
{}
?>

//$sql_res=
mysql_query(“select * from test_user_data where fname like ‘%$q%’ or lname like ‘%$q%’ order by uid LIMIT 5”);
di gunakan untuk mencari data sesuai kata yang di masukkan apabila kita mengetikkan huruf  “a” secara otomatis di text box akan keluar secara drop down database yang mengandung huruf “a”
nah untuk mempercantik textbox yang kita buat kita sisipkan css
*{margin:0px}

#searchbox

{
width:250px;
border:solid 1px #000;
padding:3px;
}

#display

{
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;
}

.display_box

{
padding:4px;
border-top:solid 1px #dedede;
font-size:12px;
height:30px;
}

.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
jalankan deh di localhost mu….dan taddaaaaa kamu punya search ala facebook….
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: