Built.io Blog

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: Screen-Shot-2016-04-06-at-1.16.12-PM.png

{{$a0.base_link}} will look like: Screen-Shot-2016-04-06-at-1.16.20-PM.png

The Features – How is it different from other ‘tag’ plugins?

  • Edit text: The text within smart tags is editable, unlike most tags. You can edit the text by just clicking on the tags.
  • Easy customization: The type of brackets that Smart Tags uses to identify text to be converted can be changed. The default is curly braces. This can be modified by changing the options provided in init(options) startLimit and endLimit.
  • Quick delete: Once normal text is converted to smart tags, you can delete the entire tag in a single ‘Backspace’ or ‘Delete’ key press.
  • 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 unminified versions.

    To use this plugin in 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(){<br> var tagInput = new SmartTagsInput("testTagInput");<br> tagInput.init();<br> }, false);

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

    You can find more information on Github.

    Subscribe to our blog