Tagify

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="../node_modules/@yaireo/tagify/dist/tagify.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../node_modules/@yaireo/tagify/dist/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>

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

Blacklist

Use "blacklist": ["apple", "ananas", ...] prop.

Preview
HTML

                    
                      <!-- Tagify -->
                      <input type="text" class="js-tagify tagify-form-control form-control" placeholder="Write some tags" value="new, bestseller, apple"
                             data-hs-tagify-options='{
                               "blacklist": ["apple", "ananas"]
                             }'>

Remove Button

Use "clearBtnSelector": "#removeTagsBtn" prop.

Preview
HTML

                    
                      <!-- Tagify -->
                      <div class="form-group">
                        <input type="text" class="js-tagify tagify-form-control form-control" placeholder="Write some tags" value="css, html, javascript"
                               data-hs-tagify-options='{
                                 "clearBtnSelector": "#removeTagsBtn"
                               }'>

                        <button id="removeTagsBtn" class="btn btn-primary">Remove all</button>
                      </div>
                      <!-- End Tagify -->

Mix

Start typing 'a' with @ or #. For sample @apple

Preview
HTML

                    
                      <!-- Tagify -->
                      <textarea class="js-tagify tagify-form-control form-control"
                                data-hs-tagify-options='{
                                  "mode": "mix",
                                  "pattern": "@|#",
                                  "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>

                      <!-- End Tagify -->

List manually

Preview
HTML

                    
                      <!-- Tagify -->
                      <input type="text" class="js-tagify tagify-form-control tagify-form-control-list form-control" placeholder="Write some tags"
                             data-hs-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
                             }'>

Custom template

                    
                      <!-- Tagify -->
                      <div class="input-group input-group-merge w-md-50">
                        <div class="input-group-prepend">
                          <div class="input-group-text">
                            <i class="tio-account-square-outlined"></i>
                          </div>
                        </div>

                        <input class="js-tagify-avatars tagify-form-control form-control" placeholder="Add creater name" aria-label="Add creater name"
                               data-hs-tagify-options='{
                                 "delimiters": null,
                                 "enforceWhitelist": true,
                                 "whitelist": [
                                   {
                                     "value": "Htmlstream",
                                     "src": "../assets/svg/brands/htmlstream.svg"
                                   },{
                                     "value": "Digitalocean",
                                     "src": "../assets/svg/brands/digitalocean.svg"
                                   }, {
                                     "value": "Google",
                                     "src": "../assets/svg/brands/google.svg"
                                   }, {
                                     "value": "Mailchimp",
                                     "src": "../assets/svg/brands/mailchimp.svg"
                                   }, {
                                     "value": "Prosperops",
                                     "src": "../assets/svg/brands/prosperops.svg"
                                   }, {
                                     "value": "Spec",
                                     "src": "../assets/svg/brands/spec.svg"
                                   }, {
                                     "value": "Spotify",
                                     "src": "../assets/svg/brands/spotify.svg"
                                   }, {
                                     "value": "Frontapp",
                                     "src": "../assets/svg/brands/frontapp.svg"
                                   }, {
                                     "value": "Figma",
                                     "src": "../assets/svg/brands/figma.svg"
                                   }, {
                                     "value": "Bookingcom",
                                     "src": "../assets/svg/brands/bookingcom.svg"
                                   }
                                 ],
                                 "dropdown": {
                                   "enabled": 1,
                                   "classname": "tagify__dropdown__menu"
                                 }
                               }'>
                      </div>
                      <!-- End Tagify -->

                    
                      <script>
                       $('.js-tagify-avatars').each(function () {
                         var settings = $(this).attr('data-hs-tagify-options') ? JSON.parse($(this).attr('data-hs-tagify-options')) : {},
                           tagifyAvatars = $.HSCore.components.HSTagify.init($(this), {
                             templates: {
                               tag: function tag(tagData) {
                                 try {
                                  return "<tag title=\"" + tagData.value + "\" contenteditable=\"false\" spellcheck=\"false\" class=\"tagify__tag " + (tagData["class"] ? tagData["class"] : "") + "\" " + this.getAttributes(tagData) + ">" +
                                            "<x title=\"remove tag\" class=\"tagify__tag__removeBtn\"></x>" +
                                            "<div class=\"d-flex align-items-center\">" +
                                            "" + (tagData.src ? "<img class=\"avatar avatar-xss avatar-circle mr-2\" src=\"" + tagData.src.toLowerCase() + "\">" : "") + "" +
                                              "<span>" + tagData.value + "</span>" +
                                            "</div>" +
                                          "</tag>";
                                 } catch (err) {}
                               },
                               dropdownItem: function dropdownItem(tagData) {
                                try {
                                  return "<div " + this.getAttributes(tagData) + " class=\"tagify__dropdown__item " + (tagData["class"] ? tagData["class"] : "") + "\">" +
                                           "<img class=\"avatar avatar-xss avatar-circle mr-2\" src=\"" + tagData.src.toLowerCase() + "\">" +
                                           "<span>" + tagData.value + "</span>" +
                                         "</div>";
                                } catch (err) {}
                               }
                             }
                           }).addTags(settings.whitelist.slice(0, 1));
                         });
                       });
                      </script>

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- 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">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Advanced select</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <!-- Tagify -->
                              <input type="text" class="js-tagify tagify-form-control form-control" placeholder="Write some tags" value="css, html, javascript">
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

Methods

Parameters	Description	Default value
`clearBtnSelector`	Clear all tags.	`null`
`hasManualList`	Add menu with tags.	`false`