jQuery autocomplete @mention

Question

I have this autocomplete plugin from Andrew Whitaker - DEMO let's say I have a line in textarea

"@peterwateber Welcome"

I want to display it in a hidden tag as

"@ [peterwateber] welcome"

How am I supposed to do this? I'm not so good at javascript ...

I tried to look at this code here from Hawkee

Answer 1

I wrote the original code mentioned here and fixed the menu problem in which Peter:

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

Answer 2

Hiya Working demo here: http://jsfiddle.net/67dxH/

There was already a good discussion above, as you said, the behavior is similar: value of the hidden tag as = @[C#] and the textarea as @C#

Hope this is a helpful person, let me know how this happens, cheers! :)

JQuery code

 function split(val) { return val.split(/@\s*/); } function extractLast(term) { return split(term).pop(); } function getTags(term, callback) { $.ajax({ url: "http://api.stackoverflow.com/1.1/tags", data: { filter: term, pagesize: 5 }, type: "POST", success: callback, jsonp: "jsonp", dataType: "jsonp" }); } $(document).ready(function() { $("#tags") // don't navigate away from the field on tab when selecting an item .bind("keydown", function(event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { event.preventDefault(); } }).autocomplete({ source: function(request, response) { if (request.term.indexOf("@") >= 0) { $("#loading").show(); getTags(extractLast(request.term), function(data) { response($.map(data.tags, function(el) { return { value: el.name, count: el.count } })); $("#loading").hide(); }); } }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item ui.item.value = "@" + ui.item.value; terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(""); return false; } }).data("autocomplete")._renderItem = function(ul, item) { return $("<li>") .data("item.autocomplete", item) .append("<a>@[" + item.label + "]&nbsp;<span class='count'>(" + item.count + ")</span></a>") .appendTo(ul); }; });​