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.
- Supports
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
andDown
arrows to navigate between multiple suggestions when dropdown is active - Can use
Enter
orTab
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.