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.
Features
- Light-weight, no dependencies.
- Simple API. Easy to master.
- Care about accessibility. Interacts very well using the keyboard keys. Free from the focus traps.
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
- No Idea?
- Set Pre-Defined Value
- Set Placeholder
- Focus State
- Invalid State (Custom)
- Hide Placeholder on Focus
- Disabled Input
- Read-Only Input
- Limit Minimum Tags
- Limit Maximum Tags
- Check for Valid Tag Pattern
- Form Event
- Paste Event
- Warn for Duplicate Tags with Alert Message
- Warn for Duplicate Tags with Flash Highlight
- Disable Characters with
picker.state.escape
- Filter Characters with
picker.f()
Method - Directory (Experiment)
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! ❤️