Facebook Style Tag Friends with Jquery, Ajax and PHP

How to implement Facebook like tag friends in your status or update box. It is great feature to adding friends start with @ symbol. I had tried this with Jquery, Ajax and PHP, it’s simple.

I would like to use a facebook style friend tagger on an application that is used to create blog posts. If a user enters @ sign and then starts entering a friend’s name (from a user table) then the application will lookup and then user will select the name from a list. Upon selection of the name it will send an email mentioning that you have been tagged in the blog post xyz etc.

Sample Database
create database table with name “user_data

CREATE TABLE IF NOT EXISTS `user_data` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `fname` varchar(25) DEFAULT NULL,
  `lname` varchar(25) DEFAULT NULL,
  `country` varchar(25) DEFAULT NULL,
  `img` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`uid`)
) 

Dumping data for table `user_data`

INSERT INTO `user_data` (`uid`, `fname`, `lname`, `country`, `img`) VALUES
(1, 'Ram', NULL, 'india', 'ram.jpg'),
(2, 'amit', 'singh', 'india', 'amit.jpg'),
(3, 'quick', 'mysupport', 'india', 'quickmysupport.jpg');

tagfriends.html
Contains javascipt and HTML code. $(“#contentbox”).live(“keyup”,function(){}contentbox is the id name of update box(div tag). Using $(this).text() calling updatebox value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook like Tag Friends</title>
<link href="../tagfriends/style.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

var start=/@/ig;
var word=/@(\w+)/ig;

$("#contentbox").live("keyup",function() 
{
var content=$(this).text();
var go= content.match(start);
var name= content.match(word);
var dataString = 'searchword='+ name;

if(go.length>0)
{
$("#msgbox").slideDown('show');
$("#display").slideUp('show');
$("#msgbox").html("Type the name of someone or something...");
if(name.length>0)
{
$.ajax({
type: "POST",
url: "boxsearch.php",
data: dataString,
cache: false,
success: function(html)
{
$("#msgbox").hide();
$("#display").html(html).show();
}
});

}
}
return false();
});

$(".addname").live("click",function() 
{
var username=$(this).attr('title');
var old=$("#contentbox").html();
var content=old.replace(word,""); 
$("#contentbox").html(content);
var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";
$("#contentbox").append(E);
$("#display").hide();
$("#msgbox").hide();
$("#contentbox").focus();
});

});
</script>
</head>
<body>
<h2>Facebook Style Tag Friends with Jquery, Ajax and PHP.</h2>
<h3>Tutorial link <a href="http://quickmysupport.com/php">Click Here</a></h3>
<p>Eg: @Ram, @amit @quickmysupport</p>
<div id="xxx"></div>
<div id="container">
  <div id="contentbox" contenteditable="true"> </div>
  <div id='display'> </div>
  <div id="msgbox"> </div>
</div>
</body>
</html>

$(“.addname”).live(“click”,function(){}addname is the class name of anchor tag(autosuggestion list). Using $(this).attr(‘title’) calling anchor tag title value.

Note : contentbox div tag contenteditable=”true”

boxsearch.php

<?php
include('config.php');
if($_POST)
{
$q=$_POST['searchword'];
$q=str_replace("@","",$q);
$q=str_replace(" ","%",$q);
$sql_res=mysql_query("select * from 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'];

?>
<div class="display_box" align="left">
<img src="user_img/<?php echo $img; ?>" class="image"/>
<a href="#" class='addname' title='<?php echo $fname; ?>&nbsp;<?php echo $lname; ?>'>
<?php echo $fname; ?>&nbsp;<?php echo $lname; ?> </a><br/>
<?php
}
}
?>

CSS (style.css)

@charset "utf-8";
/* CSS Document */

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#00FFFF;
}
h2,h3,p
{
font-family:verdana;
margin-left:65px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
text-align:left;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#msgbox
{
border:solid 1px #dedede;padding:5px;
display:none;background-color:#f2f2f2
}
.red
{
color:#cc0000;
font-weight:bold;
}
 a
{
text-decoration:none;
}
a:hover
{
text-decoration:none;
}
#display
{
display:none;
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;
}
.display_box a
{
color:#333;
}
.display_box a:hover
{
color:#fff;
}
#container
{
margin:50px; padding:10px; width:460px
}
.image
{
width:25px; float:left; margin-right:6px
}

In our previous tutorial you have learned Live Table Edit with Jquery and Ajax. In this tutorial you will learn Live HTML table edit or inline table edit is a very user friendly feature that enable users to edit HTML table value directly by clicking on table cells. In this tutorial you will learn how to implement live editable HTML table with jQuery and PHP. We will use jQuery plugin Tabledit that provides AJAX enabled in place editing for HTML table cells.

Good luck and I hope this article can be useful. See you in the next article…

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply

Your email address will not be published. Required fields are marked *