Tiny Tags Input With Autosuggest – Token Autocomplete

A tiny Vanilla JavaScript tag/token input library that makes it possible to select tags/tokens from a suggestion list or directly type your own tags/tokes in the input.

How to use it:

1. Insert the Token Autocomplete’s JavaScript and Stylesheet into the HTML.

<link href="token-autocomplete.css" rel="stylesheet" />
<script src="token-autocomplete.js"></script>

2. Create a DIV element that will be served as the container for the tag/token input.

<div id="example"></div>

3. Initialize the Token Autocomplete and done.

let tokenAutocomplete = new TokenAutocomplete({
    name: 'example',
    selector: '#example'
});

4. Set the initial tags/tokens in a JS array.

let tokenAutocomplete = new TokenAutocomplete({
    name: 'example',
    selector: '#example',
    initialTokens: ['css', 'script', 'com']
});

5. Define an array of suggestions for the autocomplete feature.

let tokenAutocomplete = new TokenAutocomplete({
    name: 'example',
    selector: '#example',
    initialSuggestions: ['html', 'css', 'javascript', 'python', 'ruby', 'php']
});

6. Set the message to display when there is no result.

let tokenAutocomplete = new TokenAutocomplete({
    name: 'example',
    selector: '#example',
    noMatchesText: 'No matching results...'
});

7. Determine the minimum number of characters typed in the input to trigger the autocomplete. Default: 1.

let tokenAutocomplete = new TokenAutocomplete({
    name: 'example',
    selector: '#example',
    minCharactersForSuggestion: 2
});

8. Customize the suggestion renderers.

let tokenAutocomplete = new TokenAutocomplete({
    suggestionRenderer: function (suggestion) {
        var option = document.createElement('li');
        option.textContent = suggestion.text;
        if (suggestion.description) {
            var description = document.createElement('small');
            description.textContent = suggestion.description;
            description.classList.add('token-autocomplete-suggestion-description');
            option.appendChild(description);
        }
        return option;
    }
});

9. Load suggestions via service URI:

let tokenAutocomplete = new TokenAutocomplete({
    suggestionsUri: '/path/to/data/'
});

Changelog:

04/25/2020

• Allows to specify custom suggestion renderers

04/18/2020

• Allows to specify value for tokens and suggestions