Smart Tags: A New Way to Highlight Tags

The Plugin – What’s It About?

‘Smart Tags Input’ is a JavaScript plugin that allows you to easily turn any text input (entered within double curly braces) into ‘smart tags’. This helps you highlight important pieces of data and differentiate them from normal text.

Examples:

{{Sample Text}} will be converted to:

{{$a0.base_link}} will look like:

The Features – How Is It Different From Other 'Tag' Plugins?

View a demo here!

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 Result

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:
<script src="dist/smart-tags-input.js"></script>

Next, initialize the plugin in the JavaScript file, which should be your website’s local file. To do this, first create an instance of SmartTagsInput by passing an element’s ID or the DOM itself, then use the init() method to initialize the plugin.
document.addEventListener('DOMContentLoaded', function(){
var tagInput = new SmartTagsInput("testTagInput");
tagInput.init();
}, false);

Once you complete these steps, the SmartTagsInput component will be available for use.

You can find more information on GitHub.