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.
npm install jquery.tagifyA 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.
Include the jquery.tagify.js and jquery.tagify.css after you've included jQuery on the page.
``html`
Create a tagified UI control:
`javascript`
$('#my_text_input').tagify();
Optionally you can pass to tagify an options object to control various aspects of tagify. The available options are:
`javascript
{
//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.',
};
`
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.
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
Greg Goforth @ Decipher, Inc.
MIT
`
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%