Simple Tagging System With Autocomplete - jQuery amsify.suggestags

amsify.suggestags is a simple jQuery tag/token input plugin which converts the regular input into a multi-select, auto-suggesting tagging system.

Compatible with the most 3rd framework such as Bootstrap 4/3, Materialize, etc.

1. Download the latest release and include the following JavaScript and CSS files in your page:

<!-- jQuery CDN  -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<!-- Amsify Plugin -->
<link rel="stylesheet" href="/css/amsify.suggestags.css">
<script src="/js/jquery.amsify.suggestags.js"></script>

2. Create a normal input field on the page and specify the pre-selected tags in the value attribute (optional).

<input type="text" name="color" value="Orange,Black">

3. Attach the plugin to the input field and specify an array of auto suggestions (optional).

$('input[name="color"]').amsifySuggestags({
  type : 'amsify',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange']
});

4. Use a 3rd framework to style the tagging system.

// requires the latest Bootstrap 4 or Bootstrap 3 framework
$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap'
});
// requires the latest Materialize framework
$('input[name="color"]').amsifySuggestags({
  type : 'materialize'
});

5. Specify the maximum number tags allowed to enter. Default: 5.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  tagLimit: 3
});

6. Customize the appearance of the selected tags.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  classes: [],
  backgrounds: [],
  colors: []
});

7. Sometimes you might need to block custom tags that are not listed in the auto suggestions.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  whiteList: true
});

8. Available callback function.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  afterAdd: function(value) {
    // after add
  },
  afterRemove: function(value) {
    // after remove
  },
});

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