Tagify
Tagify - lightweight input "tags" script.
Official documentation
For more detailed information and examples, see the official documentation: Tagify.
How to use?
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
Nova to enable it.
<script src="../../assets/js/components/hs.tagsinput.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
$.HSCore.components.HSTagsInput.init(".js-tagify");
});
</script>
Basic Example
<input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
<script>
$(document).on("ready", function () {
// initialization of tagify
$.HSCore.components.HSTagsInput.init(".js-tagify");
});
</script>
Blacklist
Usedata-blacklist="apple" attribute.
<input class='form-control-tags js-tagify' placeholder='Write some tags' value='new, bestseller, apple'
data-blacklist='apple,ananas'>
<script>
$(document).on("ready", function () {
// initialization of tagify
$.HSCore.components.HSTagsInput.init(".js-tagify");
});
</script>
Remove all button
Use data-clear-btn="#remove-tags-btn" attribute.
<!-- With Remove Button -->
<div class="form-group">
<input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript"
data-clear-btn="#remove-tags-btn">
</div>
<button id="remove-tags-btn" class="btn btn-primary">Remove all</button>
<!-- End With Remove Button -->
<script>
$(document).on("ready", function () {
// initialization of tagify
$.HSCore.components.HSTagsInput.init(".js-tagify");
});
</script>
Mix with Patterns
Start typing 'a' with @ or #
<textarea class="form-control-tags tags-textarea js-tagify-mix">[[cartman]] and [[kyle]] do not know [[homer simpson]] because he"s a relic.</textarea>
<script>
$(document).on("ready", function () {
// initialization of tagify
$.HSCore.components.HSTagsInput.init(".js-tagify-mix", {
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"
}
});
});
</script>
Render suggestions list manually
<input class="form-control-tags js-tagify-list" data-list-manual="true" placeholder="Write some tags">
<script>
$(document).on("ready", function () {
// initialization of tagify
$.HSCore.components.HSTagsInput.init(".js-tagify-list", {
whitelist: ["A# .NET", "A# (Axiom)", "A-0 System"],
dropdown: {
position: "manual",
maxItems: Infinity,
enabled: 0,
classname: "tagify__dropdown__menu"
},
enforceWhitelist: true
});
});
</script>
Custom templates
<input class="form-control-tags js-tagify-avatars" placeholder="Add members">
<script>
$(document).on('ready', function () {
var tagifyAvatars = $.HSCore.components.HSTagsInput.init(".js-tagify-avatars", {
delimiters: null,
templates : {
tag : function(v, tagData){
try{
return `<tag title="${v}" contenteditable="false" spellcheck="false" class="tagify__tag ${tagData.class ? tagData.class : ""}" ${this.getAttributes(tagData)}>
<x title="remove tag" class="tagify__tag__removeBtn"></x>
<div>
${tagData.code ?
`<img class="tag-avatar rounded-circle mr-2" style="margin-top: 2.2px;"
width="20px" height="20px"
src="${tagData.code.toLowerCase()}">` : ""
}
<span class="tagify__tag-text">${v}</span>
</div>
</tag>`;
}
catch(err){}
},
dropdownItem : function(tagData){
try {
return `<div class="tagify__dropdown__item ${tagData.class ? tagData.class : ""}">
<img class="rounded-circle mr-2" style="margin-top: 2.2px;" width="20px" height="20px"
src="${tagData.code.toLowerCase()}">
<span>${tagData.value}</span>
</div>`
}
catch(err){}
}
},
enforceWhitelist: true,
whitelist: [
{value: 'Holden Alvarado', code: '../../assets/img/100x100/img4.jpg'},
{value: 'Aleena Houston', code: '../../assets/img/100x100/img5.jpg'},
{value: 'Macey Parks', code: '../../assets/img/100x100/img6.jpg'},
{value: 'Andres Welch', code: '../../assets/img/100x100/img7.jpg'},
{value: 'Haiden Stephens', code: '../../assets/img/100x100/img8.jpg'},
{value: 'Leon Hartman', code: '../../assets/img/100x100/img9.jpg'},
{value: 'Briley Massey', code: '../../assets/img/100x100/img10.jpg'},
{value: 'Lana Joyce', code: '../../assets/img/100x100/img11.jpg'},
{value: 'Sylvia Huang', code: '../../assets/img/100x100/img12.jpg'},
],
dropdown: {
enabled: 1,
classname: "tagify__dropdown__menu"
}
});
// add the first 2 tags from the "allowedTags" Aray automatically
tagifyAvatars.addTags(tagifyAvatars.settings.whitelist.slice(0, 2));
});
</script>
Sizing
Use .form-control-sm or .form-control-lg
<!-- Small -->
<div class="form-group">
<input class="form-control-tags form-control-sm js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<!-- End Small -->
<!-- Default -->
<div class="form-group">
<input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<!-- End Default -->
<!-- Large -->
<div class="form-group">
<input class="form-control-tags form-control-lg js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<!-- End Large -->
Modal
<!-- Modal Toggle -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Modal Toggle -->
<!-- Tags Input 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">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label>Write some tags</label>
<div class="input-group">
<input class="form-control-tags js-tagify" value="css, html, javascript">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Tags Input Modal -->
Validation states
For more inforamation about form validation your can read on Validation page
Write some tags
<div class="u-has-success">
<input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
<small class="text-success">Write some tags</small>
</div>
Write some tags
<div class="u-has-error">
<input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
<small class="text-danger">Write some tags</small>
</div>