simple search engine script
Ever wondering how facebook made its friend search engine? Simple! Follow the guides in this tutorial, and you too will start making facebook-like user friendly search engines using PHP, jQuery. The interesting thing is that this tutorial combines ajax, PHP and MySQL. Still Wondering what I'm going to do? In this tutorial, I'll teach you how you can make a PHP/jQuery Search Script that works like facebook's friend search. Happy reading...VIEW SCREENSHOT:
Download
This tutorial requires two plugins:
- jQuery-1.5.1.min.js
- jQuery.watermarkinput.js
- index.php
- search.php
- findfriend.js
Index.php
<html><head>
<title>Simple Search Engine - Ohwofosirai Desmond</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="findfriend.js"></script>
<script type="text/javascript" src="jquery.watermarkinput.js"></script>
<style type="text/css">
#display{
width:250px;
display:none; font-family:cursive;
float:right; margin-left:4em;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box img{width:25px; height:25px;}
.display_box{
padding:4px; border-top:solid 1px #dedede; text-transform:capitalize;
font-size:12px; height:30px; cursor:pointer;
}
.search{
width:250px
}
</style>
</head>
<body>
<div style="width:300px; float:right; font-size:12px; margin-right:50em; vertical-align:middle; margin-top:10em; padding-bottom:2px;" align="right">
<input type="text" class="search" id="search"/><br/>
<div id="display" style="position:fixed;"></div>
</div>
</body>
</html>
Search.php
<?phpif($_POST)
{
mysql_connect("localhost","root","") or die("cannot login to mysql");
mysql_select_db("facebook") or die("cannot select database");
//replace "facebook" with the name of your database
$q=$_POST['searchword'];
$sql_res=mysql_query("select * from profiles where email like '%$q%' or fname like '%$q%'");
while($row=mysql_fetch_array($sql_res))
{
$fname=$row['fname'];
$lname=$row['lname'];
$img=$row['profilpic'];
$id=$row['id'];
$k_fname='<b>'.$q.'</b>';
$k_lname='<b>'.$q.'</b>';
$fname = str_replace($q, $k_fname, $fname);
$lname = str_replace($q, $k_lname, $lname);
?>
<div class="display_box" align="left" id="friend<?php echo $id; ?>" onMouseOver="$('.addbutton#butt<?php echo $id;?>').css('visibility','visible')" onMouseOut="$('.addbutton#butt<?php echo $id;?>').css('visibility','hidden')"><img src="thumb/<?php echo $img; ?>" style="vertical-align:middle; float:left; margin-right:6px" /><span style="float:left" id="name<?php echo $id;?>"><?php echo $fname; ?> <?php echo $lname; ?> </span><span style="float:right; margin-right:8px; margin-top:0px; cursor:pointer;" onClick="$('#<?php echo "friend".$id; ?>').remove()" id="close" title="close"> Χ </span><br/><span style="font-size:9px; color:#999999; float:left"><?php echo $row['sex']; ?></span></div>
<?php
}
mysql_close();
}
else
{
}
?>
Findfriend.js
var ans;function findfriend(string,div){
$("#display").empty();
if (string.length<1) return false;
else{
$.ajax({
type: "POST",
async: false,
url: "search.php",
data: "searchword="+string,
cache: false,
success: function(html){
ans=html;
}
});
return $("#"+div).html(ans).fadeIn(500);
}
}
jQuery(function($){
$("#search").Watermark("Find a clique");
$("#search").keyup(function(e){
if ($(this).val()=="") { $("#display").fadeOut(500); }
else {
findfriend($(this).val(), 'display');
$("#display").fadeIn(500);
}
});
});
KEYWORDS: ajax search script, friend find, Search engine
