jQuery autocomplete @mention

Question

I have this autocomplete plugin from Andrew Whitaker - DEMO Lets say I have a string in a textarea

"@peterwateber welcome"

I want it to output in a hidden tag as

"@[peterwateber] welcome"

how should I do it? I'm not that good at Javascript...

I've tried looking at this code here from Hawkee

Hiya, do you mean something like this let me know if this helps, I will set it as answer http://jsfiddle.net/LHNky/3/ , have a nice one! cheers. **or** let me know if its something else will try to help you out! — Tats_innit, Apr 08 '12 at 05:19
What do you mean by "I want it to output in a hidden tag as"? — codef0rmer, Apr 08 '12 at 05:21
@Tats_innit yes absolutely! but the problem is how do I get to output the selected suggestion and at the same time at the hidden tag let say: "@peterwateber hey!" in the textarea and in the hidden tag "@[peterwateber] hey!" — Peter Wateber, Apr 08 '12 at 05:21
@codef0rmer if the textarea's value is = "@peterwateber hello" then the hidden tag value would then be "@[peterwateber] hello" — Peter Wateber, Apr 08 '12 at 05:22
Okies, I might have solution for you then, but just to double check you want drop down i.e. hidden value = @[foobar] yay and the selected value which appear in the texture as @foobar yay ?? if thats the case above jsfiddle does that or you want opposite? sorry if I sound thick but want to doble check before I answer :) CHeerios! — Tats_innit, Apr 08 '12 at 05:25
Hey @PeterWateber do you want drop down value to show @[C#] as well right now it shows [c#] ?? **I have made the change so that selected value will come as @C#** ! *waiting for your reply,* after that will post the answer! Cheers man! — Tats_innit, Apr 08 '12 at 05:34
@Tats_innit i want the value of the hidden tag as = @[C#] and the textarea as @C# just that — Peter Wateber, Apr 08 '12 at 05:36
Saweet man done, posting my answer now Please let me know how it goes, cheers! — Tats_innit, Apr 08 '12 at 05:37

score 4 · Answer 1 · answered Apr 08 '12 at 05:40

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

Already had good discussion above like you said behavior is like: value of the hidden tag as = @[C#] and the textarea as @C#

Jope this is helpful man, let me know how it goes, 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);
    };
});

woo! thanks i forgot about the _renderItem woohooo thank you so much cheers! — Peter Wateber, Apr 08 '12 at 05:45
hey @Tats_innit what if I want something like this http://jsfiddle.net/peterwateber/gucPn/11/? using jquery autocomplete though. this one is using hawkees problem only it has dropdown up and down arrow key issue. — Peter Wateber, Apr 08 '12 at 06:05
@PeterWateber Hiya, you mean you want exact same behavior in your **new type of** jsfiddle i.e. if value of the hidden tag as = @[C#] and the textarea as @C# ?, cheers! — Tats_innit, Apr 08 '12 at 07:01
here you go http://stackoverflow.com/questions/10060931/jquery-autocomplete-using — Peter Wateber, Apr 08 '12 at 07:01
@PeterWateber saweet man onto it, wait will give you solution can you clarify the question I asked in your other question :) cheerios! — Tats_innit, Apr 08 '12 at 07:03

score 3 · Accepted Answer · answered Apr 08 '12 at 19:46

3

I wrote the original code mentioned here and have fixed the menu problem Peter was having:

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

answered Apr 08 '12 at 19:46

Hawkee

2,027
23
20

jQuery autocomplete @mention

2 Answers2

Linked