@avcs/autosuggest

AutoSuggest

A JavaScript plugin to implement IDE like autocompletion in input, textarea or contenteditable fields.

Demo | Documentation

Features

General

• Supports input, textarea and contenteditable fields
• No external dependencies like jquery or bootstrap
• Can add and remove inputs dynamically.

Trigger

• Can use any character or any sequence of characters as a trigger.
• If no trigger is passed will use space as a trigger.
• Trigger character will also be removed when inserting a suggestion except for the above case.

Suggestions

• Can supply an array of strings as Suggestions.
• Can supply an array of objects as Suggestions to get fine control over the behavior of suggestions.
• Can pass HTML inside Suggestion.show if you want to design how the suggestion is shown in the dropdown.
• Can pass HTML in Suggestion.insertText if you want to show HTML as is in the contenteditable fields.
• Can pass HTML in Suggestion.insertHTML if you want to insert HTML as evaluated DOM elements in contenteditable fields.
• Can pass a Function in SuggestionList.values which will receive the keyword and generates Suggestions dynamically.
  • Supports Async allowing you to fetch suggestions over API calls, shows a loader until the callback is executed.
  • By default the plugin matches all suggestions that starts with keyword, if you want more control over matching, like fuzzy search, you can use Function to plug the behavior into the plugin.

Dropdown

• Current scroll states are considered when calculating the position of dropdown.
• Considers line-height of the trigger character (height in case of input) to determine the position of dropdown.
• Can use Up and Down arrows to navigate between multiple suggestions when dropdown is active
• Can use Enter or Tab key to insert the current selected Suggestion in the dropdown
• Can use Esc key to close the dropdown.
• Dropdown will be shown on keydown or mousedown inside the input field, when the value before the current selection ends with "trigger + keyword" (without spaces) and the immediate character after the selection does not belong to a-zA-Z0-9_ (Anything inside the selection will not be considered inside keyword)
• In case of contenteditable, if the selection spans over multiple nodes with different styles, the suggestion will be inserted into the first node, hence follows the style of the first node.