Autocomplete functionality on a textarea

sslepian picture sslepian · Mar 25, 2010 · Viewed 43.8k times · Source

Is there a way to implement auto-complete functionality in a region defined by textarea tags or something similar?

I'm currently using a jQuery auto-complete plugin to suggest input to the user inside input tags, but the issue is that the auto-complete phrases can often be fairly long and thus scroll off the edge of the input field.

Answer

amgraham picture amgraham · Jan 26, 2012

You could also (two years later, mind you) try asuggest, it offers word completion inside the textarea after the caret.

A simple example:

var suggests = ["hello", "world"];
$("#text-area1").asuggest(suggests);

This will match things easily, no limits, no minimum character count.

More bells and whistles:

var suggests = ["head", "hello", "heart", "health"];
$("#text-area1").asuggest(suggests, {
    'endingSymbols': ', ',
    'minChunkSize': 3,
    'delimiters': ':',
    'stopSuggestionKeys': [$.asuggestKeys.RETURN]
});

This would require a three (or more) character to start matching, as well as requiring the string to begin with the characater :, place a comma , after each completion, and stop bugging you after you hit the RETURN key.

With some tab-cycling, to be discrete:

var suggests = ["head", "hello", "heart", "health", "horizontal"];
$("#text-area1").asuggest(suggests, {
    'autoComplete': false,
    'cycleOnTab': true
});

This won't offer up suggestions, but will cycle through the matches when the user hits their TAB key.