Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Smart Tags: A New Way to Highlight Tags

DZone's Guide to

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!

Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

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.

    Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

    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.

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

    {{ parent.tldr }}

    {{ parent.urlSource.name }}