Tagify

A jQuery plugin to create a "tagified" UI control out of a normal text input.

View project onGitHub

jQuery.tagify

A simple UI control to turn any text input into a "tagified" UI control. The value of the input will be split on the specified delimiter and create one tag for each item in the list.

a simple tagify control

Installation

Include the jquery.tagify.js and jquery.tagify.css after you've included jQuery on the page.

<script src='/path/to/jquery.tagify.js'></script>
<link href='/path/to/jquery.tagify.css' rel="stylesheet" />

Usage

Create a tagified UI control:

$('#my_text_input').tagify();

Optionally you can pass to tagify an options object to control various aspects of tagify. The available options are:

{
    //space delimited string of classes to add to tags (allows for custom styling of your tags)
    addClassToTag: '',

    //the delimiter the original input should be split on to create the tags
    delimiter: ',',

    //character codes that should trigger the "add" tag functions
    addNewDelimiter: [13, 44, 188, 32],

    //callback to be run immediately after a tag has been added
    addCb: $.noop,

    //callback to be run immediately after a tag has been removed 
    removeCb: $.noop,

    //the placeholder text for the tagify input
    placeholder: '',

    //a regex to validate tags against
    inputValidation: false,

    //button text for taggify button, if it's shown
    buttonText: 'go',

    //whether or not to show the button for the tagify input
    showButton: false,

    //should duplicate tags be removed?
    removeDupes: true,

    //preview puts the contents of the original input into the tagify input, useful for copying the string value that tagify is creating for you
    showPreviewIcon: false,

    //a title attribute for the preview icon
    previewTitle: 'Click to view the tag values as a string. Useful for copy / paste into other tagify inputs.'

    //if set to a number, only maxTagLimit amount of tags will be allowed.
    maxTagLimit: null,

    //used as placeholder text for the tagify input if the max tag limit is reached
    maxTagLimitMsg: 'Max tag limit reached.',

};

Methods

reset - $input.tagify('reset');

Reset the tagified input to an empty state. Note: This will remove any tags, and empty the input generated by tagify, but it does not remove the instance from the node.

Examples

Show me a Tagify UI that has: