I received a request from my reader that asked to me 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 just collabration of my previous posts.
Download Script 
Live DemoSample Database
create database table with name "user_data"
CREATE TABLE user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
Previous Post: Facebook like Autosuggestion with jQuery, Ajax and PHP.
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.
<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; // @ Match
var word=/@(\w+)/ig; //@abc Match
$("#contentbox").live("keyup",function()
{
var content=$(this).text(); //Content Box Data
var go= content.match(start); //Content Matching @
var name= content.match(word); //Content Matching @abc
var dataString = 'searchword='+ name;
//If @ available
if(go.length>0)
{
$("#msgbox").slideDown('show');
$("#display").slideUp('show');
$("#msgbox").html("Type the name of someone or something...");
//if @abc avalable
if(name.length>0)
{
$.ajax({
type: "POST",
url: "boxsearch.php", // Database name search
data: dataString,
cache: false,
success: function(data)
{
$("#msgbox").hide();
$("#display").html(data).show();
}
});
}
}
return false();
});
//Adding result name to content box.
$(".addname").live("click",function()
{
var username=$(this).attr('title');
var old=$("#contentbox").html();
var content=old.replace(word," "); //replacing @abc to (" ") space
$("#contentbox").html(content);
var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";
$("#contentbox").append(E);
$("#display").hide();
$("#msgbox").hide();
});
});
</script>
//HTML Code
<div id="container">
<div id="contentbox" contenteditable="true">
</div>
<div id='display'>
</div>
<div id="msgbox">
</div>
</div>
$(".addname").live("click",function(){}- addname is the class name of anchor tag(autosuggestion list). Using $(this).attr('title') calling anchor tag title value. ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var start=/@/ig; // @ Match
var word=/@(\w+)/ig; //@abc Match
$("#contentbox").live("keyup",function()
{
var content=$(this).text(); //Content Box Data
var go= content.match(start); //Content Matching @
var name= content.match(word); //Content Matching @abc
var dataString = 'searchword='+ name;
//If @ available
if(go.length>0)
{
$("#msgbox").slideDown('show');
$("#display").slideUp('show');
$("#msgbox").html("Type the name of someone or something...");
//if @abc avalable
if(name.length>0)
{
$.ajax({
type: "POST",
url: "boxsearch.php", // Database name search
data: dataString,
cache: false,
success: function(data)
{
$("#msgbox").hide();
$("#display").html(data).show();
}
});
}
}
return false();
});
//Adding result name to content box.
$(".addname").live("click",function()
{
var username=$(this).attr('title');
var old=$("#contentbox").html();
var content=old.replace(word," "); //replacing @abc to (" ") space
$("#contentbox").html(content);
var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";
$("#contentbox").append(E);
$("#display").hide();
$("#msgbox").hide();
});
});
</script>
//HTML Code
<div id="container">
<div id="contentbox" contenteditable="true">
</div>
<div id='display'>
</div>
<div id="msgbox">
</div>
</div>
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" >
<img src="user_img/<?php echo $img; ?>" class="image" />
<a href="#" class='addname' title='<?php echo $fname; ?> <?php echo $lname; ?>'>
<?php echo $fname; ?> <?php echo $lname; ?> </a>
</div>
<?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" >
<img src="user_img/<?php echo $img; ?>" class="image" />
<a href="#" class='addname' title='<?php echo $fname; ?> <?php echo $lname; ?>'>
<?php echo $fname; ?> <?php echo $lname; ?> </a>
</div>
<?php
}
}
?>
CSS
#container
{
margin:50px; padding:10px; width:460px
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
text-align:left;
}
#msgbox
{
border:solid 1px #dedede;padding:5px;
display:none;background-color:#f2f2f2
}
#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;
}
.image
{
width:25px; float:left; margin-right:6px
}
{
margin:50px; padding:10px; width:460px
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
text-align:left;
}
#msgbox
{
border:solid 1px #dedede;padding:5px;
display:none;background-color:#f2f2f2
}
#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;
}
.image
{
width:25px; float:left; margin-right:6px
}
Facebook Cookbook: Building Applications to Grow Your Facebook Empire
pz tell me in xml not with config.php
ReplyDeleteWonderful post bro. I am a big follower of 9lessons. All your posts are very good.
ReplyDeleteWas that my request? :)
ReplyDeleteAnyway tutorial is not working in Firefox, otherwise tried in IE and everything looks great ;)
Great work. Very nice & useful script... :)
ReplyDeletewow great bro.really cool
ReplyDeleteHi, actually you can achieve some selector to and create custom friend selector like this example ..
ReplyDeletehttp://labs.buzzknow.com/facebook/_app/customfriendselector/
this is use for iframe application and require latest facebook sdk :)
cheers 9lessons
@Lucifix
ReplyDeleteWorking fine in Firefox
very nice.Love this script
ReplyDeleteYou really need to add security to these tutorials. These scripts your showing people are open to SQL Injections!
ReplyDeleteit's not working in my firefox too (3.6.8, windows)
ReplyDeleteThis is Like magic..Nice one broh
ReplyDeleteits not work...why..
ReplyDeleteWhat if my friend's name was:
ReplyDelete@'; DROP TABLE user_data;--
Your query would be:
select * from user_data where fname like '%'; DROP TABLE user_data;--%' or lname like '%'; DROP TABLE user_data;--%' order by uid LIMIT 5
Bye bye user_data table
DO NOT USE THIS SCRIPT AS-IS!! IS IS VULNERABLE TO SQL INJECTION ATTACKS
Hey... Josh J is right...
ReplyDeleteWe also have to take care about those SQL injection attacks... :(
Cant use the script as is.. please make few corrections.
I'm just giving an idea. Why u people talking about SQL injections
ReplyDeletehe is already showed the concept, cant you people just add the safety measurement yourself?
ReplyDeleteif you cannot do basic stuff such as protect sql injection, then you are not qualified to use this code.
Yes, Srinivas is absolutely right. Thanks Srinivas.
ReplyDeleteThis is nice work.no matter what people are saying.But Joshua is very intelligent man.To discover such a bug.But awesome tutorial thank..Am IN TANZANIA
ReplyDeleteNOT WORKING IN FIREFOX 3.6
ReplyDeleteNot working in FF 3.6.10 (Mac). I'm getting this JS error: http://imgur.com/SmMrD.png. Hope this helps!
ReplyDeletereturn false()!!! function thori na hai...
ReplyDeleteright code... return false;
hi does it also work if i have an textarea???!
ReplyDeleteWhat is to change ? thank you
Josh J said it is vulnerable to SQL Injection attacks, but which code can't be fixed? It can easily be fixed using bind params. lol..
ReplyDeletegreat script...
ReplyDeletebut i wonder,,it is only provide 1 tag person only?because i try in firefox 3.5 its run good in multiple tag, but in chrome, and opera only provide 1 tags only...
thx b4 for the help...
In the real world, you're going to deal with adversaries who will try to break your code. So yes, security is an important issue that you cannot ignore.
ReplyDeleteBut this is a div, how about a textarea?
ReplyDeleteThis not working for multiple tagging, It works only for first memeber....
ReplyDeleteThe dropdown is to be focused when we type something in the textarea. the dropdown should be navigated with arrow keys like in facebook. it is not working like facebook status tagging. can you please any one help me to develop like in facebook
ReplyDeletehi Sri,
ReplyDeletethis was Great Code..
but it would be perfect with submit function..
or can you provide us example using input text or textarea..
To the people complaining about SQL Injections, that is NOT the point of this tutorial. Someone who's looking into doing something like these should hopefully already have an idea on what SQL Injections are and how to avoid them (with that being said, it probably would be a good idea for the author of this article to put a NOTE or warning or something to novice coders looking for a quick copy and paste solution).
ReplyDeleteBravo to the articles, this site is always consistent with usable and quick tutorials.
How to change regular expression to accept Unicode search keywords ?
ReplyDeletevar start=/@/ig; // @ Match
var word=/@(\w+)/ig; //@abc Match
Anyone? Thank you in advance for the assistance.
i have got problem, it will automatically add
ReplyDeletebefore the name... and i dont know why...
But .. Awsome!! Thankssss
I have two doubts:
ReplyDelete1. How can i tag multiple friends?
2. how can i close and stop the searching when sample text is entered?
i want to ask about regex condition when i'm write an email text?
ReplyDeletesuch as [email protected]
i try to make this exception but i cant
please help me
i check in error browser
ReplyDeletein go.length:
"Uncaught TypeError:Cannot read property 'length' of null (repeater 15 times)"
and
in name.length:
"Uncaught TypeError:Cannot read property 'length' of null (repeater 2 times)"
can it fixed?
how to create facebook style next previous image popup with comment content? please help me..
ReplyDeleteHow to change the div into textarea??
ReplyDeletewhat is the use for prefix in the config? thanks folks.
ReplyDeleteI am having a problem with the dropdown why is it that I can't use the arrow keys? how can i use the arrow keys instead of the mouse to select?
ReplyDeleteI have the same question like Dzikri Aditya Darmawan. Please answer me. :)
ReplyDeleteSeriously how do we submit this via a form otherwise it's a little bit pointless?
ReplyDeleteAny guides would be AWESOME!
Owesome tut
ReplyDeleteThe dropdown is to be focused when we type something in the textarea. the dropdown should be navigated with arrow keys like in facebook. it is not working like facebook status tagging. can you please any one help me out in this
ReplyDeleteany update to this code now that they no longer use the @ for linking? great job, thanks so much.
ReplyDeletenice bro........
ReplyDeleteexcellent contribution friend would like to know how to work it and send me the contents of that div to a php process
ReplyDeletesorry for my lenguaje, not speak ingles
Nice post thank a lot for posting
ReplyDeleteHow to change the div into textarea??
ReplyDeleteCan you post it for image tagging also.......
ReplyDeleteHow to change the div into textarea? after post insert db? srinivas
ReplyDeleteHello, nice to visit your blog! Very good what you do! A query, is there any possibility of adding labeling of a person you get an email notificandotelo? Sorry for my English is very basic as I am starting my programming recently. Thank you very much.
ReplyDeletePost?
ReplyDeleteYou are genius Srinivas, you simplified my job
ReplyDeleteHi is this possible in textarea? because it is not working for me... you use the "div" contenteditable="true" ..but when I use textarea.. it is not working..
ReplyDeleteThis plugin is much easier https://github.com/astroanu/jquery-tag-a-friend2
ReplyDeleteThe toturail is great... how we can implement navigation as in fb? it will be a great hint... hope u will ost that here... thanx.
ReplyDeletecan be implemented with a form? inside a textarea or input?
ReplyDeletelooks osm as u r..:) but i have a question i want to make tags stable through database connectivity. but i got no idea on this.could you please help me. :)
ReplyDeleteNot working.... need to polulate datbase first...
ReplyDeletecan i put it into textbox not div?
ReplyDelete
ReplyDeleteits not working with textarea please answer
i have modified it with text area. But due to the fact in the code login that is making old value blank. It is working only for one friend tag. Any idea will be welcome for making it for multiple tag in textarea.
ReplyDeleteif form is bottom position, after click user in list dropdown, it jump to Top page. How can i fix it ?Thanks
ReplyDeleteHello
ReplyDeletePlease why is it that we can not tag more two people and write a text without it being deformed ?
Hi,
ReplyDeleteIs there a way we can implement this in Angularjs.
What a great job!9lessons is my elibrary
ReplyDeleteHello Sir,
ReplyDeleteI am big follower of yours.sir i need list of Tag like #RedsRugby from the facebook can you please help me?
Why can't tag multiple user in the text area or content editable div
ReplyDeleteThanks lot
ReplyDelete