Add Tags From Predefined Data - jQuery simply-tag
File Size: | 7.87 KB |
---|---|
Views Total: | 3438 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.