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.
Usage
Create a tagified UI control:
;
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%