Tagify - Tags input Component

Basic example

Passing the input element as a parameter to Tagify will transform it into a tags-component. Without any settings, the user will be allowed to create any tags they want, without a count limit.

If the input element has a pre-defined value attribute, tags will be created from it.

(Try Double-clicking a tag to edit it)

HTML

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

JAVASCRIPT

text input

In this example:

Tagify instance with initial settings Object
Only allow tags from the whitelist to exist
Manually create initial whitelist from the original input's value
Simulate fetching whitelist (from a server) as the user is typing
"Remove all tags" by an external button
Listen to various Tagify events
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 fetching 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

Same using custom suggestions:

The dropdown will appear immediately when Tagify has focus.

The suggestions are styled as tags this time. Clicking on a suggested it, it will be added to Tagify

HTML

<input name='input-custom-dropdown' class='some_class_name' placeholder='write some tags' value='css, html, javascript'>

JAVASCRIPT

CSS

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 setting flag is set to true

🚩 This example is very interesting because it shows another layer of complexity - Films' names might include commas (,), and therefore it is very important to load initial values as Object Collection (Array of Objects) where each Object is proper JSON as shown in the example below, or else initial tags will not get parsed well if they include commas.

🚩 Another important thing to keep in mind is that the default delimiters setting of Tagify is to split tags by commas, and when tags (might) contain commas inside them, this setting should be changed to null, so when a user is typing, for example, a movie name which contains commans, a tag will not be created as soon as comma was inputed.

HTML

<textarea name='tags2' placeholder='Movie names'>
    [{"value":"The Good, the Bad and the Ugly"}, {"value":"The Matrix"}]
</textarea>

JAVASCRIPT

Easy to customize

The easiest way to customize styles (colors, borders, spacing, radii, etc.) is by using CSS variables.

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

<input class='customLook' value='some.name@website.com'>
<button type="button">+</button>

JAVASCRIPT

CSS

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 @ is typed, following 1 more character, suggestions dropdown will show Southpark-only items, and when starting with #, Simpsons items list.

Note that the two whitelists are very different from eachother in teams of structure. The first is quite complex, as it uses numeric IDs as value ("value" prop is always unique), and the rendered text is placed in a custom property named "text".
The other whitelist, Simpsons is very basic, just a flat array of strings.

Note that "homer simpson" tag is set to readonly in this example. If tried to select all text and delete everything, readonly tags will remain.

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 exist because not everything that starts with @ or # (or whatever was defined as pattern) is meant to be rendered as a tag.

Creating new tags:

To create new tags (ones not included in your whitelist collection), simply make sure to keep the enforceWhitelist setting as false, which is the default. After a new tags has been added, you should listen to the add and probably update your local state (Ex. server request).

HTML

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

JAVASCRIPT

outside-of-the-box

Some designs might require showing the tags outside of the input box, so to set this up some manual CSS changes has to be made, and also the dropdown.position setting should be set to "input" so the suggestions dropdown will be rendered right next to input element and not relative to the whole component (which is the default)

HTML

<input name='tags-outside' class='tagify--outside' placeholder='write tags to add below'>

JAVASCRIPT

CSS

Render suggestions list manually

Renders the suggestions list manually - useful for situations where it is wished showing 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

CSS

Disabled user input

User cannot type or paste any input not edit already-exiting tags.
Tags can only be selected from the suggestions list (whitelist) dropdown.

HTML

<input name='tags-disabled-user-input' placeholder='Select tags from the list''>

JAVASCRIPT

Users list

This example shows how to customize Tagify further. It also includes an Add All option as the first item in the suggestions dropdown list.

tagTextProp is very interesting in this example as it allows inputing both a value or a name and have them both match against the whitelist items. First the "value" is looked for, and if failed, then prop which was defined by the tagTextProp setting.

HTML

<input name='users-list-tags' value='abatisse2@nih.gov, Justinian Hattersley'>

JAVASCRIPT

CSS

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. Another way of giving colors to tags is discussed here. Clicking a tag once will change its color.

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.

If there is no match for the typed text, a special dropdown item will be renderd using the optional settings: templates.dropdownItemNoMatch

HTML

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

JAVASCRIPT

CSS

Tags with properties

Some cases requires more control per-tag, for example, sending a different value to the server than the textual value the user sees/entered.

Another example, would be different colors for different tags or tags' groups.

It's possible to add any number of properties for a tag. The only constant is the value property which must be unique and declared per-tag, and by default that will be the rendered text, unless specified otherwise using the settings.

The properties 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-.

💡 In this example, some countries have an extra property searchBy which is used for smarter suggestions matching when the user types something.

HTML

Javascript

CSS

Readonly mix

Tags that are read-only mixed with removable tags

HTML

<input
    name='tags-readonly-mix'
    class='readonlyMix'
    placeholder="Type something"
    value='[
        {
            "value"    : "foo",
            "readonly" : true,
            "title"    : "read-only tag"
        },
        {
            "value"    : "bar"
        },
        {
            "value"    : "Locked tag",
            "readonly" : true,
            "title"    : "Another readonly tag"
        }
    ]'/>

Javascript

Drag & Sort

To be able to sort tags by draging, a 3rd-party script is needed. In this example I will be using my own - lightweight & simple native HTML5 dragsort script.

Any drag & drop script would do that is able to also sort the elements. The only requirement is that when the sorting it done, tagify.updateValueByDOMTags() must be called to sync Tagify with the change.

HTML

<input name='drag-sort' value='tag 1, tag 2, tag 3, tag 4, tag 5, tag 6' />

Javascript

single-value select

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

If the `enforceWhitelist` setting is set to `true` and a tag is currently selected, user text input will be disabled, so altering the currently selected tag is forbidden.

HTML

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

Javascript

jQuery plugin version

Tagify can also be used as a jQuery plugin

HTML

<input name='tags-jquery' value='try, adding, a tag'>
<button class='tags-jquery--removeAllBtn' type='button'>Remove all tags</button>