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,

        //callback to be run when a tag is found to be invalid.  Is passed the tag string, the tagify input jquery object,
        //and a force function that allows you to add the invalid tag (or a fixed up version of it) easily.
        //Example:
        //    function invalidCb (tag, $input, force) {
        //        //tag was found to be invalid because it has spaces (see inputValidation option),
        //        //fixup the tag and then force it's addition.  Note: you don't have to fix anything
        //        //up, you can simply call force(tag) to add the "invalid" tag based on the inputValidation
        //        //regex.
        //        tag = tag.replace(' ', '-');
        //        force(tag);   
        //    }
        invalidCb: $.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.',

    };

API

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 (JSFiddle)

Show me a Tagify UI that has:

Author

Greg Goforth @ Decipher, Inc.

License

MIT

Summary

 project  : tagify
 repo age : 1 year, 9 months
 active   : 8 days
 commits  : 34
 files    : 18
 authors  :
    21    Greg Goforth            61.8%
    12    Christopher Hiller      35.3%
     1    sahilsk                 2.9%

Détail du package

jquery.tagify

readme