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.

Facebook Style Tag Friends with Jquery, Ajax and PHP.
Facebook Style Tag Friends with Jquery, Ajax and PHP.

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
}

 

Please follow and like us:

Add a Comment