Facebook Style Tag Friends with Jquery, Ajax and PHP

How to implement Facebook style 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');

$(“.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”

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…

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!