Implementing jquery UI autocomplete to show suggestions when you type "@"

You can do this by providing a function to the source option of autocomplete:

var availableTags = [ /* Snip */];

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

$("#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({
    minLength: 0,
    source: function(request, response) {
        var term = request.term,
            results = [];

        /* If the user typed an "@": */
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            /* If they've typed anything after the "@": */
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            /* Otherwise, tell them to start typing! */
            } else {
                results = ['Start typing...'];
            }
        }
        /* Call the callback with the results: */
        response(results);
    },
    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
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

Here's a working example: http://jsfiddle.net/BfAtM/2/

Note that this is almost identical to this demo, except for the requirement for the user to type "@". That code is located inside the source option argument.

Hope that helps.

As of the date of this note, I recommend the jquery.mentionsInput plugin. It supports @mention tagging just like on facebook, complete with avatars and either local or ajax data.

http://podio.github.com/jquery-mentions-input/

To expatiate Andrew Whittaker's answer a bit, 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.

The widget however, functions as just a part of a component of a tag (herein referred to as mention) management utility, which has 3 components:

1. Autocomplete module: The component responsible for procuring and displaying the set of items that can be used to create a mention, given a string.

2. Mention tracking module: The component responsible for keeping track of mention-associated data; at the bare minimum the location, as well as the superficial and substantive (if existent) values of each mention should be tracked throughout all modifications of the text of the input element to which the utility is affixed.

3. Mention visual differentiation module: The component responsible for differentiating mention text from the rest of the text in the input element to which the utility is affixed

Delving further in to the implementation of the remaining 2 modules, in plain English, would be tedious; its much better to look at code! Fortunately, I've made a solution, Mentionator, that is robust (more so than all the other solutions suggested here), well-structured, easy to follow, and copiously commented. So its worth a look at whether you just want an out-of-the box solution, or reference material to create your own.