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

We will also create three files:

index.php
search.php
findfriend.js

The required mysql file is attached in the download pack for your benefit. You should create a folder named thumb.

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

<?php
if($_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);
        }
    });
   });
ajax search script, friend find, Search engine