Triggered @mention Autocomplete like Facebook, Twitter and Google+

Question

I have been trying to make something like Facebook @tagged Friend name add in text area. I have been using jquery ui auto-complete to do the job , it's working fine except that I want some symbol such as @ or ~ to start the tag, I can't figure it out how. Anyone has ideas ? I'm using it for multiple tag of friends just like Facebook.

Marimaria

Can you show what you have tried so far ? – Paulo

possible duplicate of autocomplete in middle of text (like Google Plus) – Castro

you can see similar plugins at here – Unaware

Answer 1

I wrote a plugin to accomplish this:

http://www.hawkee.com/snippet/9391/

$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@" 
});

Harshman

Answer 2

You can use a bootstrap plugin library that I wrote. It works on ContentEditable divs: http://sandglaz.github.com/bootstrap-tagautocomplete/

Dillie

Answer 3

Here's another one (triggered by a starting character like @) http://www.9lessons.info/2010/08/tag-friends-with-jquery-ajax-and-php.html

Ochre

Answer 4

THIS MAY BE USEFUL a sample one., : http://jsfiddle.net/suneeshtr/6ymLD/1/ also check :http://www.hawkee.com/snippet/9391/

Standup

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – Edinburgh

Answer 5

Hey you can try something like this ... Hope it works..

$q=$_POST['searchword'];
$q=str_replace("@","",$q); 
$q=str_replace(" ","%",$q);
$sql_response=mysql_query("select * from data where fname like '%$q%' or lname like '%$q%'");
while($row=mysql_fetch_array($sql_response))
{
  $fname=$row['fname'];
  $lname=$row['lname'];  
}

Endstopped

Answer 6

I'm a couple of years late, but I figured I'd add my two cents since it doesn't appear as if anyone has actually answered the question yet ;) .

The source option of jQuery UI Autocomplete is used to specify an array containing the items that are to be displayed in the drop-down list once the widget is triggered. It can be defined as such an array, a function that returns such an array, or a URL to a resource which produces such an array.

If the array which ultimately becomes the value of source is empty, the widget won't display a drop-down list. So, defining source as a function capable of returning a non-empty array only when @ is entered will make the widget behave as you desire.

If you don't want to go through the trouble of defining such a function, have a look at Mentionator, a jQuery plug-in which provides mention creation and management functionality (as well as helpful auxiliary features) that actually builds on top of the functionality of jQuery UI Autocomplete. Its maintained by yours truly :) .

Mhd