Taggier

JavaScript object to easing tag and hashtag inputs

GitHub

Try it out

Use comma , as the separator

BACKSPACE removes a tag if there are no characters to remove

Retrieve all tags

NPM INSTALL

npm install taggier

HTML:

<div id="example"></div>

JavaScript:

import Taggier from 'taggier';

const taggier = new Taggier('example');

ES6 MODULES

You need to include type="module" in the script element, to declare the script as a module. Read more

HTML:

<div id="example"></div>

JavaScript:

import Taggier from 'https://cdn.jsdelivr.net/gh/vikcch/taggier@x.x.x/src/scripts/taggier.js';

const taggier = new Taggier('example');

Styles

CSS:

.tag {
    background-color: #ccc;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px;
}

.tag:hover {
    filter: brightness(95%);
    transition: all .1s ease;
}

.tag::after {
    content: ' \00d7';
}

.tag:hover::after {
    color: red;
}

Syntax

new Taggier(divId|div[, options]);

Parameters

divId String - The id of the div Element

div HTMLDivElement - The div Element

options Object - Optional

Options

Object: Second parameter - Optional

const myOptions = {
    gap: 8,
    hashtag: true
};
const taggier = new Taggier('example', myOptions);

gap Number - Set the gap in pixels between each tag. Default: 16

forbiddenPattern Regex | Boolean - Forbidden characters. (Set to false to have none). Default: /[^\w]+/g

hashtag Boolean - Is hashtag. Default: false

border Boolean - If no css for the element is specified a 1px solid gray will be assign. Default: true

focus Boolean - Has outline. Default: true

Accessors

tags Array - Array of strings beeing each element a tag text.

Methods

getTags() : Array - Returns a new Array of strings beeing each element a tag text.

setTags(values) (values : Array) : void - Sets tags beeing each element a tag text.

addTags(values) (values : Array) : void - Add tags beeing each element a tag text.

removeAll() : void - Remove all tags.

hasPendingText() : Boolean - Returns true if there is any text not tagged.

pendingText() : String - Returns the pending text in the element.

makeTagFromPendingText() : void - Makes a Tag from pending text in the element.