Christopher DuBois Christopher DuBois - 1 year ago 110
jQuery Question

autocomplete in middle of text (like Google Plus)

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 Source

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.

// 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") {
    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);
    focus: function() {
        // prevent value inserted on focus
        return false;
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        // add the selected item
        // add placeholder to get the comma-and-space at the end
        this.value = terms.join("");
        return false;

And here it is working:

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): It also includes custom display of autocomplete suggestions.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download