jquery.tagify

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.

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:

• no options
• a button for triggering add functions
• input validation
• placeholder text
• add / remove callback functions
• a preview icon (useful for getting the string value of the original input)
• a max tag limit
• custom tag styles

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%