Over a million developers have joined DZone.

Smart Tags: A New Way to Highlight Tags

Check out this nifty JavaScript plug-in that easily and uniformly highlights your input fields. Tag... you're it!

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

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

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 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.

    Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

    Topics:
    javascript ,css ,html ,tagging

    Published at DZone with permission of Guruprasanth Arunachalam, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    The best of DZone straight to your inbox.

    SEE AN EXAMPLE
    Please provide a valid email address.

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
    Subscribe

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}