Smart Tags: A New Way to Highlight Tags
Join the DZone community and get the full member experience.Join For Free
The Plugin – What’s It About?
The Features – How Is It Different From Other 'Tag' Plugins?
The Need – Why Did We Create This Plugin?
The Built.io Flow team wanted to differentiate this inserted data from normal text by tagging the data. After an extensive search, we were unable to find any plugins that converted data within double curly braces into smart tags. We, therefore, undertook the task of creating a plugin that meets this requirement.
The ‘Smart Tags Input’ plugin now differentiates input data from normal text. It has helped us highlight important data and let users quickly identify the input parameters.
Initially, the inserted parameters looked like this:
With the help of ‘Smart Tags Input’, the inserted parameters now looks more professional and neat:
The Mechanism – How the Plugin Works
We used the REGEX ‘(.*?)’ to convert the text within double curly braces into tags, by using the <span> element.
The <textarea> element is in front, while the <div> element—that contains <span> elements—is placed behind it. The <textarea> element as well as <div> element are assigned the same look and styling. The opacity settings of these elements have been tweaked so that when focused in, the <textarea> is visible, and when focused out, the <div> element appears with tags.
The Process – How to Install This Plugin
Download the zip file and extract it into your system. The plugin can be found inside the dist folder, with both the minified and un-minified versions.
To use this plugin on your website, add it in the script tag:
var tagInput = new SmartTagsInput("testTagInput");
Once you complete these steps, the SmartTagsInput component will be available for use.
You can find more information on GitHub.
Published at DZone with permission of Guruprasanth Arunachalam, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.