Minimal Tagging Input In Pure JavaScript – Tagger

Category: Form , Javascript | February 6, 2021
Author: jcubic
Views Total: 306 views
Official Page: Go to website
Last Update: February 6, 2021
License: MIT


Minimal Tagging Input In Pure JavaScript – Tagger


Tagger is a small yet full-featured JavaScript tagging system that enables the user to insert tags into an input field.

How to use it:

To use the tagging system, place the Tagger’s JavaScript and Stylesheet in the HTML document.

<link href="tagger.css" rel="stylesheet">
<script src="tagger.js"></script>

Create a normal input field for the tagging system.

<input type="text" name="tags" />

Initialize the Tagger on the input field and done.


Determine whether to allow white space in the tags. Default: true.

tagger(document.querySelector('[name="tags"]'), {
  allow_spaces: true

Determine whether to allow duplicate tags. Default: false.

tagger(document.querySelector('[name="tags"]'), {
  allow_duplicates: false

Specify what should be in the href attribute. Default: false.

tagger(document.querySelector('[name="tags"]'), {
  link: function(name) {
    return `javascript:alert('${name}');`;

Add/remove a tag programmatically.



v0.3.1 (02/06/2020)

  • fix ambiguous tags

v0.2.2 (09/26/2020)

  • bug fix

v0.2.1 (05/01/2019)

  • updated

v0.2.0 (07/04/2019)

  • added link option

v0.1.3 (06/22/2019)

  • update

v0.1.2 (06/15/2019)

  • fix adding tags

v0.1.1 (05/26/2019)

  • Fixed this.tags_from_input() does not work

You Might Be Interested In:

One thought on “Minimal Tagging Input In Pure JavaScript – Tagger

  1. Jack Putter

    This is great but one issue is that if there are two similar phrases in the completion list then the first tag automatically binds before the user has a chance to finish typing the second phrase. For example, if “tomato” and “tomato sauce” are both in the list, it’s impossible to tag “tomato sauce”. Is there a way around this?


Leave a Reply