Roman Imankulov / asuggest

github personal page

[ github project ]

jquery.asuggest is a small suggestion (autocomplete) library intended to be a lightweight replacement for jquery.autocomplete in textareas. The fact is that drop-down menu in the autocomplete library works not very well in texteareas. So the alternative decision without menu and only with automatic word completion is proposed.


Basic asuggest sample. Sugestion works after the newline or space symbols.

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

There is a set of default options which can overridden during asuggest creation or just in any part of the code. Check this out: second area uses ”:” character as delimiter and begins making suggestions only after the 2-nd character. This code uses default options overriding.

var suggests = ["hello", "world"]; $.fn.asuggest.defaults.delimiters = ":"; $.fn.asuggest.defaults.minChunkSize = 2; $("#area2").asuggest(suggests);

The third area uses ”,” and ”:” for suggestions and starts performing its job after the 3-rd character. This example avoids using global scope of defaults and overrides options only for the current jQuery object.

var suggests = ["hello", "world"]; $("#area3").asuggest(suggests, { 'delimiters': ',:', 'minChunkSize': 3, });

This variant doesn't perform automatic completion which can be pretty annoying in some cases, but tab-driven completion is still works as expected. You may note also that completion handles well the case of zero-sized minimal chunk.

var suggests = ["head", "hello", "heart", "health", "horizontal", "horizont", "hormonotherapy"]; $("#area4").asuggest(suggests, { 'minChunkSize': 0, 'delimiters': ' \n', 'autoComplete': false, 'cycleOnTab': true });

Next sample discusses rather sophisticated “stop suggesting” feature. As you can see in previous examples, pressing Enter or Space key while autocompleting breaks this process and adds a space after the latest chosen variant. This behaviour can be disabled or overrided with two asuggest options:

In order to prevent such behaviour it’s enough to pass an empty array for a “stopSuggestionKeys” argument. The example below append a comma after each selection. In order to take odvantage of this feature it’s enough to type Enter key.

var suggests = ["head", "hello", "heart", "health", "horizontal", "horizont", "hormonotherapy"]; $("#area5").asuggest(suggests, { 'endingSymbols': ', ', 'stopSuggestionKeys': [$.asuggestKeys.RETURN], 'minChunkSize': 1, 'delimiters': ', \n' });

There is a set of constants in $.asuggestKeys variable, which simplifies the definition of stopSuggestionKeys array, as in previous example. Variants currently defined are SHIFT, CTRL, ALT, LEFT, UP, RIGHT, DOWN, DEL, TAB, RETURN, ESC, COMMA, PAGEUP, PAGEDOWN, BACKSPACE and SPACE.