## 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

[{"value":"The Good, the Bad and the Ugly"}, {"value":"The Matrix"}]

## 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

[[{"id":101, "value":"cartman", "title":"Eric Cartman"}]] and [[kyle]] do not know [[{"value":"homer simpson", "readonly":true}]] because he's a relic.

## 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

### ☝ Add items from below list:

## 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

    <input name='tags3-1' class='countries' placeholder="Try to add tags from the list">

### Javascript

### CSS

## readonly

If the original input field has a `readonly` attribute, then, via CSS, Tagify blocks interactions with `pointer-events: none;`

### HTML

    <input name='tags4' readonly value='tag1, tag 2, another tag'>

### Javascript

## 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

## disabled

If the original input field has a `disabled` attribute, then, via CSS, Tagify blocks interactions with `pointer-events: none;`

### HTML

    <input name='disabledInput' disabled value='tag1, tag 2, another 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>

### JAVASCRIPT