Do you like this project? Please support my Mecha CMS project too. Thank you!

Tag Picker 3.4.18

Tag Picker is a simple JavaScript application that aims to provide better experience for users in adding and removing comma-separated list of words.


Tags are comma-separated list of words. This application has support for hooks, so you can listen to events that occur at each interaction to provide additional features. Each tag item can also be selected using the arrow keys and a mouse click to perform actions on the selected tag, for example, to delete the tag.

Previous tabbable element. Some text to copy … foo, bar, baz, qux

Test connection with <label> element:

Test add and remove methods: add “wow” remove “wow”

Features

Usage

Browser

With the basic knowledge of accessing the DOM and manipulating it using JavaScript, you can use this application like a pro.

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

Node.js

Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.

CommonJS

const TP = require('@taufik-nurrohman/tag-picker').default;

const picker = new TP(document.querySelector('input'));

ECMAScript

import TP from '@taufik-nurrohman/tag-picker';

const picker = new TP(document.querySelector('input'));

Examples

Settings

let picker = new TP(source, join = ', ');
let picker = new TP(source, state = {
        escape: [','],
        join: ', ',
        max: 9999,
        min: 0,
        pattern: null
    });
Name Description
source The text input element.
join Tags joiner for the output value.
state The configuration data.
state.escape List of characters used to trigger the tag addition.
state.join Tags joiner for the output value.
state.max Maximum tags allowed.
state.min Minimum tags allowed.
state.pattern If defined, tag addition will be performed only if value is matched with pattern.

Methods and Properties

TP.instances

Return the application instances.

for (let key in TP.instances) {
    console.log(key);
    console.log(TP.instances[key]);
}

TP.state

This property stores the initial values of picker.state.

const picker = new TP({
    foo: ['bar', 'baz', 'qux']
});

console.log([TP.state, picker.state]);

TP.version

Return the application version.

let version = TP.version,
    major = version.split('.')[0];

if (+major < 3) { … }

picker.blur()

Blur from the content-editable element.

picker.click()

Click the content-editable element.

picker.f(tag)

Set custom tag name filter.

// Force lower-case letter(s) and trim white-space(s)
picker.f = tag => (tag || "").toLowerCase().trim();

picker.focus()

Focus to the content-editable element.

picker.get(tag)

Check the existence of a tag.

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

picker.input

Return the content-editable element.

picker.input.addEventListener('paste', () => {
    // Handle `paste` event here
});

picker.let(tag)

Remove a tag.

picker.let('foo'); // Remove `foo` tag
picker.let(); // Remove all tags

picker.let(tags)

Remove multiple tags at once.

picker.let(['foo', 'bar', 'baz']); // Remove `foo`, `bar` and `baz`

picker.output

Alias for picker.source property.

picker.pop()

Convert the tag picker element back to its original <input> element.

picker.self

Return the tag picker element.

picker.self.style.borderWidth = '4px';

picker.set(tag, index)

Add a new tag.

picker.set('foo'); // Append a `foo` tag
picker.set('foo', 1); // Insert a `foo` tag exactly at index `1`

picker.set(tags)

Add multiple tags at once.

picker.set(['foo', 'bar', 'baz']); // Add `foo`, `bar` and `baz`

picker.source

Return the <input> element.

console.log(picker.source);

picker.state

Return the modified tag picker states.

picker.tags

Return the tags data as array.

console.log(picker.tags);

Hooks

Name Description
blur Will be triggered after release focus on the tag editor.
blur.tag Will be triggered after release focus on a tag item.
change Will be triggered on every time the tags data is updated.
click Will be triggered after click on the tag editor.
click.tag Will be triggered after click on a tag item.
copy Will be triggered after copy event.
cut Will be triggered after cut event.
focus Will be triggered after focus on the tag editor.
focus.tag Will be triggered after focus on a tag item.
get.tag Will be triggered after picker.get('foo').
has.tag Will be triggered if the tag you want to add already exists.
let.tag Will be triggered after picker.let('foo').
max.tags Will be triggered if number of tags you want to submit is greater than the picker.state.max value.
min.tags Will be triggered if number of tags you want to submit is less than the picker.state.min value.
not.tag Will be triggered if tag value does not match with state.pattern.
paste Will be triggered after paste event.
pop Will be triggered after picker.pop().
set.tag Will be triggered after picker.set('foo').

picker.fire(event, data)

Trigger a hook.

picker.fire('change', [picker.tags]);

picker.hooks

Return the added hooks.

console.log(picker.hooks);

picker.off(event, then)

Remove a hook.

picker.off('change');
picker.off('change', onChange); // With context

picker.on(event, then)

Add a new hook.

picker.on('change', tags => {
    console.log(tags);
});
function onChange(tags) {
    console.log(tags);
}

picker.on('change', onChange); // With context

License

Use it for free, pay if you get paid. So, you’ve just benefited financially after using this project? It’s a good idea to share a little financial support with this open source project too. Your support will motivate me to do any further development, as well as to provide voluntary support to overcome problems related to this project.

Thank you! ❤️