Add Tags From Predefined Data - jQuery simply-tag

A really simple tagging plugin for jQuery that allows you to add tags/tokens from an autocomplete dropdown populated with predefined JSON data.

How to use it:

1. Add jQuery JavaScript library and the jQuery simply-tag plugin's files to the web page.

<link href="simply-tag.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="simply-tag.js"></script>

2. Create a container to place the tag input.

<div id="demo"></div>

3. Initialize the plugin and specify the predefined data as these:

$('#demo').simplyTag({                   
  dataSource: JSON.parse('[
    { "key": 1, "value": "JQuery" }, 
    { "key": 2, "value": "Script" }, 
    { "key": 3, "value": "Net" }
  ]')
});

4. That's it. The plugin will convert the empty container into a tag input like this:

<div class="simply-tag-root">
  <span class="simply-tags"></span>
  <input id="txt-input" dir="auto" spellcheck="true" type="text" size="1" placeholder="" autocomplete="off">
  <span class="simply-tag-loader"></span>
  <div id="test" style="display: none;"></div>
  <div class="simply-tag-suggestion-root" style="left: 0px; top: 100%; display: none; position: absolute; z-index: 1000;"></div>
  <span style="display:none" class="simply-tag-current" data-type="valid"></span>
</div>

5. All default configuration options.

$('#demo').simplyTag({                   
  allowSpecialChar: false,
  isLocal: true, // or remote data source via ajax
  dataSource: null,
  key: 'key',
  value: 'value',
});

6. Add a tag manually.

var jsonData = $('#test').simplyTag('additem',JSON.parse('{ "key": 0, "value": "Direct Add" }'));

---

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