Tagify - demo

TOGGLE OFF

## #text input

In this example, the field is pre-ocupied with 4 tags, and last tag is the same as the first tag, and will be removed because the `duplicates` option flag is set to `true`. This input field is also limited to 5 tags only.

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

### HTML

    <input name='tags' class='some_class_name' placeholder='write some tags' value='css, html, javascript, css' autofocus data-blacklist='.NET,PHP'>

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

The Matrix, Pulp Fiction, Mad Max

## #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'>@cartman and @kyle do not know #homer</textarea>

### JAVASCRIPT

@cartman and @kyle do not know #homer who is #1

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

## #Advance options

In this example, the `dropdown.enabled` setting is used (minimum charactes typed which shows the dropdown) to `3`. The Maximum number of tags is set to `6`

HTML5 `pattern` attribute is automatically used to validate tags.
Also, the `delimiters` setting using both `,` & `` 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' placeholder='Write some tags' 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

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

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

## #Readonly mode

If the original input field has a `readonly` attribute, then, via CSS, there will be no way of manually adding tags because the inline contenteditable element will be hidden.

### HTML

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

## #Readonly mix

Tags that are read-only mixed with removable tags

### HTML

    <input name='tags-readonly-mix' class='readonlyMix' placeholder="Type something" />

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