Home > Other > Simplest Tags Input Beautifier with JavaScript
Simplest Tags Input Beautifier with JavaScript

Simplest Tags Input Beautifier with JavaScript

Better tags input interaction with JavaScript.

Usage

First, load the CSS file in the <head> area:

  …
  <link href="tags-input-beautifier.min.css" rel="stylesheet">
</head>

Then, create a HTML text input element in the <body> area:

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

Then, load the JS file just before the </body> tag:

  <script src="tags-input-beautifier.min.js"></script>
</body>

Then, run the plugin:

  <script src="tags-input-beautifier.min.js"></script>
  <script>
  var foo = new TIB(document.querySelector('input[name="tags"]'));
  foo.create();
  </script>
</body>

Options

var foo = new TIB(input, config);
Variable Description
input The text input element you want to beautify.
config The configuration data. See below!
config = {
    join: ', ', // Tags joiner of the output value
    max: 9999, // Maximum tags allowed
    values: ['foo', 'bar'], // pre-defined tags data
    classes: ['tags', 'tags-input', 'tags-output'], // HTML classes
    text: ['Remove \u201C%s\u201D Tag', 'Duplicate \u201C%s\u201D Tag'],
    alert: true,
    update: function() {} // Hook that will be triggered on every tags item update
};

  Website Demo

About admin