Triggered @mention Autocomplete like Facebook, Twitter and Google+

Question

I'm trying to do something like Facebook @tagged. Add a friend's name to the text area. I use jquery ui auto-complete to do the job, it works fine, except that I need some character like @ or ~ to run the tag, I can’t figure out how to do this. Does anyone have any ideas? I use it for several friends tags like Facebook.

Answer 1

I wrote a plugin to accomplish this:

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

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

Answer 2

You can use the bootstrap plugin library that I wrote. He is working on ContentEditable divs: http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 3

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

Answer 4

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

Answer 5

Hey, you can try something like this ... I hope this 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']; } 

Answer 6

I’m late for a couple of years, but I decided that I would add my two cents, as it doesn’t look like someone really answered the question yet;).

The source jQuery UI Autocomplete option is used to specify an array containing the elements that should be displayed in the drop-down list after the widget starts. It can be defined as such an array, a function that returns such an array, or the URL of a resource that creates such an array.

If the array, which eventually becomes the source value, is empty, the widget does not display a drop-down list. Thus, the definition of source as a function capable of returning a non-empty array only when entering @ will cause the widget to behave as you wish.

If you don’t want to solve the problem of defining such a function, look at the Mentionator , the jQuery plug-in - which mentions the creation and management functions (as well as useful helper functions) that are actually based on the jQuery UI autocomplete functions. Your really supports it :).