Minimal Tagging Input In Pure JavaScript – Tagger

Category: Form , Javascript | September 26, 2020
Author:jcubic
Views Total:74 views
Official Page:Go to website
Last Update:September 26, 2020
License:MIT

Preview:

Minimal Tagging Input In Pure JavaScript – Tagger

Description:

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.

tagger(document.querySelector('[name="tags"]'));


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.

instance.add_tag('example')
instance.remove_tag('example')

Changelog:

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?

    Reply

Leave a Reply