Tagify
Tagify is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.
Official documentation
For more detailed information and examples, see the official documentation: Tagify .
How to use?
Add the following library Bootstrap-tagsinput stylesheet and script in your page.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/tagify/dist/tagify.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/tagify/dist/jQuery.tagify.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/hs.tagify.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of tagify
$('.js-tagify').each(function () {
var tagify = $.HSCore.components.HSTagify.init($(this));
});
});
</script>
Basic example
<input class="js-tagify tagify-form-control" placeholder="Write some tags" value="css, html, javascript">
Readonly
<input class="js-tagify tagify-form-control" placeholder="Write some tags" value="css, html, javascript" readonly>
Blacklist
<input class='js-tagify' placeholder='Write some tags' value='new, bestseller, apple'
data-tagify-options='{
"blacklist": ["apple", "ananas"]
}'>
Mix
<textarea class="js-tagify tagify-form-control tags-textarea"
data-tagify-options='{
"mode": "mix",
"pattern": "/@|#/",
"enforceWhitelist": true,
"whitelist": [
{
"value": "cartman",
"title": "Eric Cartman"
}, {
"value": "kyle",
"title": "Kyle Broflovski"
}, {
"value": "Homer simpson"
}, {
"value": "apple"
}
],
"dropdown": {
"enabled": 1,
"classname": "tagify__dropdown__menu"
}
}'>[[cartman]] and [[kyle]] do not know [[homer simpson]] because he"s a relic.</textarea>
List manually
<input class="js-tagify tagify-form-control tagify-form-control-list" placeholder="Write some tags"
data-tagify-options='{
"whitelist": ["A# .NET", "A# (Axiom)", "A-0 System"],
"enforceWhitelist": true,
"dropdown": {
"position": "manual",
"maxItems": "Infinity",
"enabled": 0,
"classname": "tagify__dropdown__menu"
},
"hasManualList": true
}'>
Modal example
<!-- Modal Toggle -->
<button type="button" class="btn btn-primary transition-3d-hover" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Modal Toggle -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="la la-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<input type="text" class="js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary transition-3d-hover" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-sm btn-primary transition-3d-hover">Continue</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Extend
Plugin methods are called using a wrapper:
<script>
$(document).on('ready', function () {
// initialization of tagify
$('.js-tagify').each(function () {
var tagify = $.HSCore.components.HSTagify.init($(this));
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-tagify-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-tagify-options='{}'. For more detailed or missing attributes/functions, see the official Tagify documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Selector of the button that will clear the tag field | null |
|
|
If the value is true, then after adding a new tag its value is remembered, which will be the default value of the next tag |
false |