2.2.5 • Published 5 years ago
t-i-b v2.2.5
Simplest Tags Input Beautifier
Better tags input interaction with JavaScript.
What is this?
Demo
→ https://tovic.github.io/tags-input-beautifier
Got it?
Usage
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link href="tags-input-beautifier.min.css" rel="stylesheet">
</head>
<body>
<input name="tags" type="text">
<script src="tags-input-beautifier.min.js"></script>
<script>
var tags = new TIB(document.querySelector('input[name="tags"]'));
</script>
</body>
</html>Options
var tags = new TIB(source, config);| Variable | Description |
|---|---|
source | 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
escape: [','], // List of character(s) used to trigger the tag addition
pattern: false, // Custom pattern to filter the tag name [^1]
placeholder: false, // Custom tags input placeholder [^2]
alert: true,
text: ['Delete \u201C%s%\u201D', 'Duplicate \u201C%s%\u201D', 'Please match the requested format: %s%'],
classes: ['tags', 'tag', 'tags-input', 'tags-output', 'tags-view'], // HTML classes
update: function() {} // Hook that will be triggered on every tags item update
};
// [^1]: Or simply use `data-pattern` attribute of `source` element.
// [^2]: Or simply use `data-placeholder` or `placeholder` attribute of `source` element.Methods
Initiation
var tags = new TIB( … );Get Current Tags Data
console.log(tags.tags);Get Fake Tags Input Element
console.log(tags.input);Get Tags View HTML Element
console.log(tags.self);Get Original Tags Input Element
console.log(tags.output);Get Configuration Data
console.log(tags.config);Remove All Tags
tags.reset();Remove bar Tag
tags.reset('bar');Refresh Tags Value
tags.update();Merge new values to the current values:
tags.update(['foo', 'bar', 'baz']);Sanitize Tag Name
Create custom tag input sanitizer:
tags.filter = function(text) {
text = text.replace(/^\s+|\s+$/g, ""); // trim white-space(s)
text = text.replace(/,/g, ""); // disallow `,` in tag name
text = text.toLowerCase(); // force lower-case letter(s)
return text;
};Add bar Tag
tags.set('bar');Check for Duplicate Tag Name
if (tags.tags['bar']) {
alert('Duplicate `bar` !!!')
}Check for Tags Length
console.log(Object.keys(tags.tags).length);