Better tags input interaction with JavaScript.
What is this?
→ https://tovic.github.io/tags-input-beautifier
Got it?
<!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>
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.
var tags = new TIB( … );
console.log(tags.tags);
console.log(tags.input);
console.log(tags.self);
console.log(tags.output);
console.log(tags.config);
tags.reset();
tags.reset('bar');
tags.update();
Merge new values to the current values:
tags.update(['foo', 'bar', 'baz']);
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;
};
tags.set('bar');
if (tags.tags['bar']) {
alert('Duplicate `bar` !!!')
}
console.log(Object.keys(tags.tags).length);