Simple Javascript Tagging Widget (Free Download)

Welcome to a tutorial on how to create a simple tagging widget with Javascript. Need to add tags to your audio, video, post, product, or whatever else? Well, we don’t actually need any third-party frameworks – Here is a simple example with pure Javascript – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK START

<!-- (A) JS & CSS -->
<script src="2-tag.js"></script>
<link rel="stylesheet" href="3-tag.css">
 
<!-- (B) ATTACH TAGGING HERE -->
<div id="demo"></div>
<small>Hit enter or comma to add a tag.</small>
 
<!-- (C) THE JAVASCRIPT -->
<script>
// (C1) TO ATTACH TAGGER
taggr.attach({
  target : document.getElementById("demo"), // required, target <div>
  tags : ["Doge", "Cate"], // optional, default tags
  maxLength : 12, // optional, max tag characters
  maxTags : 3 // optional, max number of tags
});
 
// (C2) TO GET TAGS
// var tags = document.getElementById("demo").getTags()
</script>

For you guys who just want to use this as a “plugin”:

1. Captain Obvious at your service, load the Javascript and CSS.
2. Create an empty <div> to generate the tags widget.
3. Call taggr.attach() to create the tags widget.
   • target Target HTML element to generate the tags widget, required.
   • tags Default tags to append, optional.
   • maxLength The maximum number of characters, optional.
   • maxTags The maximum number of tags, optional.
   • To get the list of tags in your own function, use document.getElementById("TAGS").getTags().

 

 

 

THE JAVASCRIPT

var taggr = {
  // (A) ATTACH TAGGING
  len : 0, // track number of characters for "backspace remove tag"
  attach : instance => {
    // (A1) TAGS WRAPPER
    instance.target.classList.add("tagwrap");
 
    // (A2) ATTACH INPUT FIELD
    instance.tagin = document.createElement("input");
    instance.tagin.type = "text";
    instance.tagin.className = "tagin";
    if (instance.maxLength !== undefined) { instance.tagin.maxLength = instance.maxLength; }
    instance.target.appendChild(instance.tagin);
 
    // (A3) COMMA OR ENTER TO ADD TAG
    instance.tagin.onkeyup = evt => {
      // (A3-1) COMMA OR ENTER TO ADD TAG
      if (evt.code=="Comma" || evt.code=="Enter") {
        if (instance.tagin.value=="," || instance.tagin.value=="") {
          instance.tagin.value = "";
        } else {
          taggr.add(instance, instance.tagin.value.replace(/,/g, ""));
        }
      }
 
      // (A3-2) BACKSPACE TO REMOVE LAST TAG (IF CURRENT VALUE IS EMPTY)
      if (evt.code=="Backspace" && taggr.len == 0) {
        let last = instance.target.querySelectorAll(".tag");
        if (last.length>0) { last[last.length - 1].remove(); }
      }
    };
 
    // (A4) ATTACH DEFAULT TAGS
    if (instance.tags !== undefined) {
      instance.tags.forEach((name, i) => taggr.add(instance, name));
    }
 
    // (A5) GET TAGS
    instance.target.getTags = () => {
      let tags = [];
      Array.from(instance.target.querySelectorAll(".tag"))
      .forEach(tag => tags.push(tag.innerHTML));
      return tags;
    };
  },
 
  // (B) ADD A NEW TAG
  add : (instance, name) => {
    // (B1) CHECK MAX TAGS
    if (instance.maxTags !== undefined) {
      let count = instance.target.querySelectorAll(".tag").length;
      if (count >= instance.maxTags) {
        alert(`Maximum ${instance.maxTags} tags allowed.`);
        return;
      }
    }
 
    // (B2) CREATE & APPEND NEW TAG
    let tag = document.createElement("div");
    tag.className = "tag";
    tag.innerHTML = name;
    tag.onclick = () => tag.remove();
    instance.target.insertBefore(tag, instance.tagin);
 
    // (B3) EMPTY TAG INPUT
    instance.tagin.value = "";
  }
};

Uh oh, this looks “very confusing”, but keep calm and look carefully. There are only 2 functions here.

• taggr.attach() You already know this, we use it to create the “tags widget”. Not going to explain line-by-line, read through the sections and they are very straightforward… It’s just long-winded.
• taggr.add() Fired when the user hits “enter” or “comma”, appends a new tag in the wrapper.

 

 

GENERATED HTML

<div id="demo">
  <div class="tag">Doge</div>
  <div class="tag">Cate</div>
  <input type="text" class="tagin">
</div>

Yep, this is what taggr.attach() generates. Don’t think this needs an explanation…

 

THE CSS

/* (A) WRAPPER */
.tagwrap {
  display: flex;
  border: 2px solid #aaa;
}
 
/* (B) SHARED TAGS */
.tagwrap .tag, .tagwrap .tagin {
  margin: 10px 5px;
  padding: 10px;
}
 
/* (C) TAGS */
.tagwrap .tag {
  color: #fff;
  background: #2d7dc1;
  cursor: pointer;
}
.tagwrap .tag::after {
  content: "X";
  padding-left: 20px;
}
 
/* (D) TAG INPUT */
.tagwrap .tagin {
  flex-grow: 1;
  background: none;
  border: 0;
}
.tagwrap .tagin:focus {
  outline-width: 0;
  outline: none;
}

Lastly, just CSS cosmetics to make things look better. Nothing much really… We simply set the <div> wrapper to display: flex, the tags and text input field will “flow” quite flawlessly.

 

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• CSS Flexbox – CanIUse

This example will work on all modern “Grade A” browsers.

 

LINKS & REFERENCES

• Simple Tag System With PHP MySQL – Code Boxx
• Javascript Tagging Example On CodePen