Minimal Tagging Input In Pure JavaScript – Tagger

Category: Form , Javascript | July 4, 2019
Author: jcubic
Views Total: 225
Official Page: Go to website
Last Update: July 4, 2019
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.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:


Leave a Reply