Tagify

Tagify is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Tagify documentation

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

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

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

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>
Copy

Basic example 

<input class="js-tagify tagify-form-control" placeholder="Write some tags" value="css, html, javascript">
Copy

Readonly

css
html
javascript
 
<input class="js-tagify tagify-form-control" placeholder="Write some tags" value="css, html, javascript" readonly>
Copy

Blacklist 

<input class='js-tagify' placeholder='Write some tags' value='new, bestseller, apple'
       data-tagify-options='{
         "blacklist": ["apple", "ananas"]
       }'>
Copy

Remove button 

<div class="form-group">
  <input class="js-tagify tagify-form-control" placeholder="Write some tags" value="css, html, javascript"
         data-tagify-options='{
           "clearBtnSelector": "#removeTagsBtn"
         }'>
</div>
<button id="removeTagsBtn" type="button" class="btn btn-primary transition-3d-hover">Remove all</button>
Copy

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>
Copy

List manually

A# .NET
A# (Axiom)
A-0 System
<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
       }'>
Copy

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 -->
Copy

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/tagify/

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>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-tagify-options='{
   ...
}' - array
Copy

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

clearBtnSelector

 Selector of the button that will clear the tag field null

hasManualList

 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