Simple Tag Input With Autocomplete Support - jQuery Tagator

Tagator is a jQuery plugin for tokenizing text inputs that allow your users to select multiple tags/tokens from a predefined list. The plugin also allows to type new entries in the input field, and separate them with enter or comma. Duplicate item check is supported as well.

How to use it:

1. Add the jQuery Tagator plugin's JavaScript and CSS files into the web page which has jQuery library loaded.

<link rel="stylesheet" href="fm.tagator.jquery.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="fm.tagator.jquery.js"></script>

2. Create the tag input and specify the pre-select tags in the value attribute:

<input id="example" name="example" value="jQuery,Script,Net" placeholder="Please input some tags">

3. Initialize the tag input and define an array of suggestions for the autocomplete functionality.

$('#example').tagator({
  autocomplete: ['first', 'second', 'third']
});

4. Show a background overlay when the autocomplete list is opened.

$('#example').tagator({
  autocomplete: ['first', 'second', 'third'],
  useDimmer: true
});

5. More configuration options with default values.

$('#example').tagator({
  autocomplete: ['first', 'second', 'third'],
  useDimmer: true,
  prefix:                'tagator_',
  height:                'auto',
  showAllOptionsOnFocus: false,
  allowAutocompleteOnly: false,
});

6. You're also able to config the tag input via data-option attributes as follows:

<input id="example" type="text" value="jQuery,Script,Net" 
       data-tagator-show-all-options-on-focus="true" 
       data-tagator-autocomplete="['first', 'second', 'third']"
>

7. API methods.

// refresh the tag input
$('#example').tagator('refresh');

// update the autocomplete list
$('#example').tagator('autocomplete', ['tag1','tag2','tag3']);

// destroy the tag input
$('#example').tagator('destroy');

Changelog:

2020-03-10

• Fixed an error preventing destroying plugin properly

---

This awesome jQuery plugin is developed by QODIO. For more Advanced Usages, please check the demo page or visit the official website.