jquery - autocomplete in middle of text (like Google Plus)

Question

There are tons of options out there for doing autocompletion. Most of them seem to work on the first few letters that are typed.

In Google Plus, an autocomplete option drops down soon after typing @, no matter where it occurs in the form field, and uses the letters immediately following @ to guide the autocomplete. (It also looks quite nice!)

Has anybody shared code to do this sort of thing?

Does anybody have any pointers for trying to implement a toy version of this (e.g. in jQuery)?

Answer 1

This is possible with jQueryUI's autocomplete widget. Specifically, you can adapt this demo to satisfy your requirement. Here's an example:

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

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

var availableTags = [ ... ]; // Your local data source.

$("#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 (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            }
        }
        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;
    }
});

And here it is working: http://jsfiddle.net/UdUrk/

Let me know if you need any more information (such as how to make it work with a remote datasource).

Update: Here's an example using a remote datasource (StackOverflow's API): http://jsfiddle.net/LHNky/. It also includes custom display of autocomplete suggestions.