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-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 Vodi 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"]
                             }'>
                    
                  

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>
                    
                  

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
                             }'>
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/vodi/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>
              
            

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

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