@tovic/t-p NPM

Tag Picker

Better tags input interaction with JavaScript.

What is this?

Demo

Usage

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link href="tag-picker.min.css" rel="stylesheet">
  </head>
  <body>
    <p><input name="tags" type="text"></p>
    <script src="tag-picker.min.js"></script>
    <script>
    var picker = new TP(document.querySelector('input[name="tags"]'));
    </script>
  </body>
</html>

Options

var picker = new TP(source, state);

Variable	Description
`source`	The text input element you want to modify.
`state`	The configuration data. See below!

state = {
    alert: true,
    escape: [','], // List of character(s) used to trigger the tag addition
    join: ', ', // Tags joiner of the output value
    max: 9999 // Maximum tags allowed
};

Methods

Initiation

var picker = new TP( … );

Get Current Tags Data

console.log(picker.tags);

Get Tag Editor Element

console.log(picker.input);

Get Tags View Element

console.log(picker.self);
console.log(picker.view); // Alias

Get Original Input Element

console.log(picker.source);
console.log(picker.output); // Alias

Get Configuration Data

console.log(picker.state);

Add Tags

picker.value('foo, bar, baz');

Add bar Tag

picker.set('bar');

Remove bar Tag

tags.let('bar');

Remove All Tags

picker.value("");

Tag Name Filter

Create custom tag name filter:

picker.f = function(text) {
    // Force lower-case letter(s) and trim white-space(s)
    return text.toLowerCase().trim();
};

Get bar Tag

console.log(picker.get('bar'));

Get All Tags

console.log(picker.tags);

Check if bar Tag Exists

if (null !== picker.get('bar')) { … }

if (picker.tags.indexOf('bar') >= 0) { … }

Count All Tags

console.log(picker.tags.length);

Destroy UI

picker.eject();

Hooks

Name	Description
`blur`
`click`
`eject`
`focus`
`blur.tag`
`click.tag`
`focus.tag`
`get.tag`
`let.tag`
`set.tag`

Add Hook

picker.on('set.tag', function(name, index) {
    alert('name: ' + name + ', index: ' + index);
});

Add Hook with ID

picker.on('set.tag', function(name, index) {
    alert('name: ' + name + ', index: ' + index);
}, 'hook-id');

Remove Hooks

picker.off('set.tag');

Remove Hook by ID

picker.off('set.tag', 'hook-id');

Trigger Hooks

picker.fire('set.tag', ['foo', 0]);

Trigger Hook by ID

picker.fire('set.tag', ['foo', 0], 'hook-id');

tag picker

3.0.0

6 years ago