Tagify - demo

#Basic example

Passing the input element as a parameter to Tagify and it will transform it into a tags-component.

The input has a value which Tagify splits into 2 tags.

HTML

<input name='basic' value='tag1, tag2'>

JAVASCRIPT

#text input

In this example:

Tagify instance with settings (whitelist sugegstions)
Simulate fetching whitelist (from a server) as the user is typing
Remove all tags from an extrenal button
Listen to Tagify events (add, remove, input, edit, invalid, click, dropdown)
Un-listen to specific event (see onAddTag function)

Intro:

The input element is pre-ocupied with 4 tags. The last tag (CSS) has the same value as the first tag, and will be removed, because the duplicates setting is set to true.

Note that whitelist & blacklist may also be set on to Tagify as data- attributes on the input tag itself as a list of tags seperated by the same delimeter defined in the Tagify's configuration. Default is comma (,)

As text is typed, the onInput Tagify event is fired, on each key stroke. Reseting the current whitelist and fecthing a new one (from mockAjax())

In real-life scenarios, a developer might wish to use different whitelists suggested to the user, according to the typed text, asusming the possibilities are too large to load at-once as the inital whitelist.

HTML

<input
    name='input'
    class='some_class_name'              // This class will be copied to the Tagify component
    placeholder='write some tags'        // This text will be shown after the last tag
    value='css, html, javascript, css'   // initial values, as String (can also be an Array of Objects)
    data-blacklist='.NET,PHP'>           // list of invaild tags, which cannot be added

JAVASCRIPT

#textarea

In this example, the field is pre-ocupied with 3 tags, and last tag is not included in the whitelist, and will be removed because the enforceWhitelist option flag is set to true

HTML

<textarea name='tags2' placeholder='Movie names'>
    The Matrix, Pulp Fiction, Mad Max
</textarea>

JAVASCRIPT

CSS

<textarea name='tags2' placeholder='Movie names'>
    The Matrix, Pulp Fiction, Mad Max
</textarea>

#Different look

No placeholder, and no way of adding tags from within the component, but only by clicking the (+) button, which is not related to Tagify in anyway, but in this example it is shown how combining a few simple things make customization easy.

This example also shows how to implement minimum-allowed tags

HTML

<textarea name='tags2' placeholder='Movie names'>
    The Matrix, Pulp Fiction, Mad Max
</textarea>

JAVASCRIPT

CSS

.customLook{
    --tag-bg                   : #0052BF;
    --tag-hover                : #CE0078;
    --tag-text-color           : #FFF;
    --tags-border-color        : silver;
    --tag-text-color--edit     : #111;
    --tag-remove-bg            : var(--tag-hover);
    --tag-pad                  : .6em 1em;
    --tag-inset-shadow-size    : 1.3em;
    --tag-remove-btn-bg--hover : black;

    display: inline-block;
    min-width: 0;
    border: none;
}

.customLook .tagify__tag{
    margin-top: 0;
}

.customLook .tagify__tag > div{
    border-radius: 25px;
}

/* hide the (x) delet-tag button if there's only one tag, to force minimum 1 tag */
.customLook .tagify__tag:only-of-type .tagify__tag__removeBtn{
    display: none;
}

.customLook + button{
    color: #0052BF;
    font: bold 1.4em/1.65 Arial;
    border: 0;
    background: none;
    box-shadow: 0 0 0 2px inset currentColor;
    border-radius: 50%;
    width: 1.65em;
    height: 1.65em;
    cursor: pointer;
    outline: none;
    transition: .1s ease-out;
    margin: 1.5rem 0 0 5px;
    vertical-align: top;
}

.customLook + button:hover{
    box-shadow: 0 0 0 5px inset currentColor;
}

.customLook .tagify__input{
    display: none;
}

#Mix text & tags

It is possible to configure Tagify to supoprt mixed content. A common example would be tagging people while writing a comment on a social website.

To allow mix content, simply pass the setting mode : 'mix'

In this example, there are a few Southpark character names and a few Simpsons ones. when the @ is typed, following 1 more character, suggestions dropdown will be shown for Southpark suggestion list and when starting with #, a Simpsons suggestion list

Note that tags can only be created if the value matches any of the whitelisted item's value.

When a textarea already has mixed-content and it wasn't pre-configured using a whitelist, the tags will ignored, so keep that in mind when populating a textarea with server data and expecting tags to "magically" appear. Whitelist must be specified because not everything that starts with @ or # (or whatever was defined) is meant to be rendered as a tag.

HTML

<textarea name='mix'>
    [[{"id":101, "value":"cartman", "title":"Eric Cartman"}]] and [[kyle]] do not know [[homer simpson]] because he's a relic.
</textarea>

JAVASCRIPT

#outside-of-the-box

Some cases might require addition of tags from outside of the box and not within.

HTML

>input name='tags-outside' class='tagify--outside' placeholder='write some tags'>

JAVASCRIPT

CSS

.tagify--outside{
    border: 0;
    padding: 0;
    margin: 0;
}
.tagify__input--outside{
    display: block;
    max-width: 600px;
    border: 1px solid #DDD;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

#Render suggestions list manually

Renders the suggestions list manually, useful for situations where you wish to shown the suggestions list inside a modal or your own popup implementaion, or even always show it. In this example the list is always shown.

HTML

>input name='tags-manual-suggestions' placeholder='write some tags'>

JAVASCRIPT

#Advance options

In this example, the dropdown.enabled setting is set (minimum charactes typed to show the dropdown) to 3.
Maximum number of tags is set to 6

Each (valid) tag gets a random color, via the transformTag callback which modifies the tag's data object before creating the tag element.

HTML5 pattern attribute is automatically used to validate tags.
Also, the delimiters setting using both comma or space as tags seperators.

The keepInvalidTags setting flag is switched on to true so invaild tags are not removed but are only marked.

HTML

<input name='tags3' value='[{"value":"point"}, {"value":"soft"}]' pattern='^[A-Za-z_✲ ]{1,15}$'>

JAVASCRIPT

#Tags with properties

Some cases requires more control per-tag, for exmaple, sending a different value to the server than the textual value the user sees/enetered. Another example, would be different colors for different tags or tags' groups. it's possible to add any number of properties per tag, the only constant is the value property which must be declared per-tag, and that will be the rendered text.

The propeties shown in the example below, declared in the allowedTags Array, will be transformed into HTML attributes for each tag element rendered from the allowed whitelist settings, so naturally some attributes are in the specs and the made-up ones should technically be prefixed with data-.

With this level of control a lot can be done via css.
For the example below, the first two tags have a readonly property and that will enable the CSS to target that and hide the × button and disable the hover state.

HTML

Javascript

CSS

.tagify__dropdown.extra-properties .tagify__dropdown__item > img{
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    transform: scale(.75);
    margin-right: 5px;
    border-radius: 2px;
    transition: .12s ease-out;
}

.tagify__dropdown.extra-properties .tagify__dropdown__item:hover > img{
    transform: none;
    margin-right: 12px;
}

.tagify.countries .tagify__input{ min-width:175px; }

.tagify.countries tag{ white-space:nowrap; }
.tagify.countries tag img{
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 3px;
    border-radius: 2px;
}

#single-value select

Similar to native <Select> element, but allows free text as value, if

HTML

<input name='tags-select-mode' class='selectMode' placeholder="Please select" />