Tiny Text Field Based Tags Input Plugin - Tagify

File Size: | 281 KB |
---|---|
Views Total: | 30691 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Tagify is a tiny jQuery plugin used to generate a simple, animated, high-performance tag / token input from either input field or textarea.
It also provides a vanilla JavaScript version which allows you to implement the tags input in pure JavaScript.
Features:
- Auto prevent duplicate tags.
- Auto split input text into tags by comma or Enter key.
- Compatible with Bootstrap 4 and Bootstrap 3.
How to use it:
1. Put the main style sheet tagify.css
in the head
:
<link href="tagify.css" rel="stylesheet">
2. Include the JavaScript file jQuery.tagify.js
after jQuery.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jQuery.tagify.js"></script>
3. You can also include the vanilla JS version if you'd like to implement the Tagify in pure JavaScript.
<script src="tagify.js"></script>
4. Create a normal input field or textfield for the tag input. You can set the predefined tags in the value
attribute as follow:
<input name="tags" placeholder="write some tags" value="predefined tags here">
5. Initialize the Tagify and done.
// jQuery $('[name=tags]').tagify(); // Vanilla JavaScript var input = document.querySelector('input[name=tags]'), tagify = new Tagify( input );
6. Enable the duplicate detection.
$('[name=tags]').tagify({duplicates : false});
7. More configuration options.
$('[name=tags]').tagify({ // tag data Object property which will be displayed as the tag's text tagTextProp: 'value', // placeholder text placeholder: '', // [regex] split tags by any of these delimiters ("null" to cancel) delimiters: ",", // regex pattern to validate input by. pattern: null, // use 'select' for single-value dropdown-like select box // use 'mix' as value to allow mixed-content // use 'integrated' to skip the creation of the wrapper // the 'pattern' setting must be set to some character. mode: null, mixMode: { insertAfterTag: '\u00A0', // node or string to add after a tag added } // interpolation for mix mode // everything between these will become a tag mixTagsInterpolator: ['[[', ']]'], // define conditions in which typed mix-tags content is allowing a tag to be created after. mixTagsAllowedAfter: /,|\.|\:|\s/, // maximum number of tags maxTags: Infinity, // false or null will disallow editing editTags: {{ clicks: 2, // Number of clicks to enter "edit-mode": 1 for single click. Any other value is considered as double-click keepInvalid: true, }}, // exposed callbacks object to be triggered on certain events callbacks: {}, // automatically adds the text which was inputed as a tag when blur event happens addTagOnBlur: true, // allow tuplicate tags duplicates: false, // trim the tag's value trim: true, // is this list has any items, then only allow tags from this list whitelist: [], // a list of non-allowed tags blacklist: [], // should ONLY use tags allowed in whitelist enforceWhitelist: false, // tries to autocomplete the input's value while typing autoComplete: { enabled: true, rightKey: false // If true, when → is pressed, use the suggested value to create a tag, else just auto-completes the input. In mixed-mode this is ignored and treated as "true" }, // String - when tags have multiple properties, and for each tag another property should be used besides the "value" mapValueToProp: "", dropdown: { classname: '', enabled: 2, // minimum input characters needs to be typed for the dropdown to show maxItems: 10, caseSensitive: false, fuzzySearch: true, accentedSearch: true, position: 'null', // 'manual' - will not render the dropdown, and you would need to do it yourself; 'text' - will place the dropdown next to the caret; 'input' - will place the dropdown next to the input; 'all' - normal, full-width design highlightFirst: false, closeOnSelect: true, clearOnSelect: true, mapValueTo: function(){}, // this setting controlls which data key will be printed in the dropdown searchKeys: ["value", "searchBy"], appendTarget: document.body } // object consisting of functions which return template strings templates: {wrapper, tag, dropdownItem}, // take a tag input as argument and returns a transformed value transformTag: function(){}, // if true, do not remove tags which did not pass validation keepInvalidTags: false, // skip invald tags skipInvalid: false, // true - remove last tag; edit - edit last tag backspace: true, // if you wish your original input/textarea value property format to other than the default (which I recommend keeping) you may use this and make sure it returns a string. originalInputValueFormat: function(){}, // if the pattern setting does not meet your needs, use this function, which recieves tag data object as an argument and should return true if validaiton passed or false/string of not // a string may be returned as the reason of the validation failure. validate: function(){} });
8. API methods.
var myInput = $('[name=tags]').tagify(); // adds new tag // String (word, single or multiple with a delimiter) or an Array of Objects // e.g. addTags(["banana", "orange", "apple"]) // or addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}]) myInput.addTags(); // removes a specific tag myInput.removeTag(DOM); // removes all tags myInput.removeAllTags(); // destroy the plugin myInput.destroy(); // converts the input's value into tags. This method gets called automatically when instansiating Tagify. Also works for mixed-tags myInput.loadOriginalValues(String/Array); // returns an Array of found matching items (case-insensitive) myInput.getWhitelistItemsByValue(Object); // returns the index of a specific tag, by value myInput.getTagIndexByValue(); // returns the first matched tag node, if found myInput.getTagElmByValue(); // returns how many tags already exists with that value myInput.isTagDuplicate(); // converts a String argument ([[foo]] and [[bar]] are..) into HTML with mixed tags & texts myInput.parseMixTags(); // returns a DOM nodes list of all the tags myInput.getTagElms(); // returns a specific tag DOM node by value myInput.getTagElmByValue(); // set/get tag data on a tag element (has.tagify__tag class by default) myInput.tagData(HTMLElement, Object); // goes to edit-mode in a specific tag myInput.editTag( HTMLElement); // exit a tag's edit-mode. if "tagData" exists, replace the tag element with new data and update Tagify value myInput.replaceTag(tagElm, Object (tagData)); // toogle loading state on/off (Ex. AJAX whitelist pulling) myInput.loading(); // same as above but for a specific tag element myInput.tagLoading(HTMLElement, Boolean); // returns a tag element from the supplied tag data myInput.createTagElem(Object (tagData)); // injects text or HTML node at last caret position. range parameter is optional myInput.injectAtCaret(HTMLElement (injectedNode), Object (range)); // places the caret after a given node myInput.placeCaretAfterNode(HTMLElement); // whatever to insert after myInput.insertAfterTag(HTMLElement (tag element), HTMLElement/String); // toggles tagify--invalid class to the Tagify wrapper element myInput.toggleInvalidClass(); // adds all whitelist items as tags and close the suggestion dropdown myInput.dropdown.selectAll(); // iterates tag DOM nodes and re-build the tagify.value array (call this if tags get sorted manually) parseTemplate String/Function (template name or function), Array (data) converts a template string (by selecting one from the settings.templates by name or supplying a template function which returns a String) into a DOM node myInput.updateValueByDOMTags();
9. Events.
var myInput = $('[name=tags]').tagify(); // e.type, e.detail, ... myInput .on('add', function(e){ // on add }) .on('removeTag', function(e){ // on remove }) .on('change', function(e){ // on change }) .on('invalid', function(e){ // on invalid }) .on('input', function(e){ // on input }) .on('click', function(e){ // on click }) .on('dblclick', function(e){ // on dblclick }) .on('keydown', function(e){ // on keydown }) .on('focus', function(e){ // on focus }) .on('blur', function(e){ // on blur }) .on('edit:input', function(e){ // on blur }) .on('edit:beforeUpdate', function(e){ // on blur }) .on('edit:updated', function(e){ // on blur }) .on('edit:start', function(e){ // on blur }) .on('edit:keydown', function(e){ // on blur }) .on('dropdown:show', function(e){ // on blur }) .on('dropdown:hide', function(e){ // on blur }) .on('dropdown:select', function(e){ // on blur }) .on('dropdown:scroll', function(e){ // on blur }) .on('dropdown:noMatch', function(e){ // on blur })
Changelog:
v3.22.3 (2021-02-26)
- fixes when typing and bluring the text is not becoming red and then deletced after a while (if whilist is objects and enforceWhitelist is true)
- [FEAT] force dropdown to always open (be placed) above or below the input
- removed Angular port from repo and linked to a dedicated repo made by another developer
- fixes "navigator" not available in SSR
- [CHORE] updated dependencies
v3.22.3 (2021-02-14)
- fixed: when editing a tag, the "edit:beforeUpdate" should not deep-clone the data, so the developer could modify it at the event callback if it is wished to remove/add other properties to the edited tag before the tag is replaced, therefore added a third option to the "trigger" event method
- fixed: when editing a tag which has other properties than "value" they should be persisted after editing
- Added a missing custom event
- fixed: Cannot read property 'withoutChangeEvent' of undefined
- fixed: typo
v3.22.2 (2021-02-14)
- when filtering dropdown items, in case whitelist items do not contain any of the custom "mapValueTo" array strings, then use value instead
- fix for whitelist of numbers a(not strings)
- fixes When using objects with "mapValueTo", typing tab to insert tag inserts value
- fixes Unable to insert tag containing "<x>" with tab key
- fixes dropdown border bottom in chrome
- fixes Clicking on The Drop-Down Scroll Closes the Dropdown
- support for multiple class names in settings.classNames properties
- fixes loadOriginalValues triggers multiple change event
- fixes last element stays in dropdown (when dropdown.position is "manual")
v3.22.1 (2021-01-18)
- [FEAT] add select & mix namespace classnames to the settings.classNames object
- [BUGFIX] TAB key does nothing in single-value mode with text entered
- [BUGFIX] Cannot read property 'insertBefore' of null
- [BUGFIX] when using "tagTextProp" setting, and typing a tag, without a whitelist, "value" property is set to "undefined"
v3.22.0 (2020-12-27)
- [FEAT] Programmatically adding tags in mix-mode
- In Mix mode, newly created tags are deleted when pressing backspace at the start of textbox
- [CHORE] added an item to the FAQ list after somebody asked a question
- [BUGFIX] autofocus React Component
- [BUGFIX] [React - Mixed mode] remove tag after starting in read-only
- [BUGFIX] Setting non-default mixTagsInterpolator fails to parse out tags
- [BUGFIX] Programmatically adding tags in mix-mode throws an error
- [BUGFIX] Check native support for promises in polyfill
- add "np" package to streamline publishing 0d1a8cd
- demo page minor changes to head tag children
- [BUGFIX] if "dropdownItemNoMatch" template is used, and the item is clicked, the dropdown won't close even if clicked outside afterwards
- Replaced demo settings with Knobs - changed H2 titles color to match the logo color
- [BUGFIX] regarding mix-mode custom whitelist text prop (not "value")
- [BUGFIX] mix-mode fixes for complex whiteilst where values are ids and another property is used as the text of the tags/suggestions
- [BUGFIX] - minor fix related to "sameStr" helper function
- [BUGFIX] [Chrome Android] cannot delete mix-mode tags using the keyboard "backspace" key
- [BUGFIX] If tag value ends with space whitelist not working
- added new "validate" function to settings, for more complex validations which pattern cannot solve
- [BUGFIX] When using dropdown.mapValueTo option the original whitelist data structure changes
v3.21.3 (2020-11-23)
- [BUGFIX] if "dropdownItemNoMatch" template is used, and the item is clicked, the dropdown won't close even if clicked outside afterwards
v3.21.3 (2020-11-11)
- made "this.trim" error-proof for "undefined" values
v3.21.0 (2020-11-06)
- when editing, on blur, add an extra parameter to "transformTag" with the preivous data object
v3.20.3 (2020-10-25)
- fixed cannot create mix-text tags
v3.20.2 (2020-10-25)
- fixed mix-mode readonly did not hide tags (x) button
v3.20.1 (2020-10-24)
- fixed a TON of mix-mode delete/backspace issues, many with readonly-tags
- removed empty textnodes inside tag template, which affected caret placement at some situations
- added "removeTextChildNodes" & "getfirstTextNode" helpers
- fixed an issue with restoring multiple readonly tags which were deleted by the browser (range-selection)
v3.20.0 (2020-10-08)
- Minor changes.
v3.19.7 (2020-10-06)
- Fixed edited tag with custom template to be able to revert back
v3.19.5 (2020-10-05)
- pasting text in non-empty input should use all text and not just the pasted part
v3.19.4 (2020-10-01)
- "onEditTagBlur" should keep any pre-defined properties of the tag's data
v3.19.2 (2020-09-28)
- fixed: whitelist items with commas should't be splitted to seperate tags
v3.19.1 (2020-09-26)
- fixed: Mixed mode - Backspace issue
v3.19.0 (2020-09-22)
- added "integrated" mode which skips the creation of the wrapper
v3.18.1 (2020-09-06)
- Fixed JS error when entering special characters
- Fixed: Make the tag search work with keywords, rather than a continuous string
v3.17.10 (2020-09-06)
- fuzzy-search refactored using Regex
v3.17.10 (2020-08-29)
- Fixed: when the dropdown is visible, with no item selected, and "tab" key is pressed & whitelist has objects, the first one is added.
v3.17.9 (2020-08-28)
- minor version bump
v3.17.3 (2020-08-11)
- Fixed: Editing tags with dropdown enabled is not saving the new value
v3.17.2 (2020-08-09)
- Bugfixed
v3.17.1 (2020-08-06)
- Bugfixed
v3.16.3 (2020-07-29)
- Fixed: Every tag entered adds
v3.16.2 (2020-07-28)
- update
v3.15.4 (2020-07-20)
- dropdown position is now an attribute by itself and not a part of the class name
- dropdown position defaults to "all" if the viewport width is less, or equal, to 480px
v3.15.3 (2020-07-15)
- Fixed Tagify suggests undefined
v3.15.1 (2020-07-14)
- changed "dropdownItemNoMatch" template prop to be an Object instead of a String
v3.14.3 (2020-07-09)
- Fixed: Automatically close dropdown is not working
v3.14.2 (2020-07-07)
- Update
v3.13.0 (2020-07-03)
- Update
v3.12.0 (2020-06-28)
- Allow whitelist items to have a `value` type `Number`
v3.11.3 (2020-06-22)
- Bugfix
v3.11.2 (2020-06-21)
- Fixed onChange is not called when clearing the last tag
v3.11.0 (2020-06-13)
- Add action button in suggestions dropdown items
v3.10.2 (2020-06-02)
- Allowed placing action-buttons inside the "dropdownItem" template so anything with a class "tagify__dropdown__item__action" will be ignored when clicking, and will not select that suggestion (but will trigger a "blur" event which will close the suggestions dropdown)
v3.9.2 (2020-05-19)
- Fixed: Mix text & tags - error when add a tag after deleted another one - IndexSizeError
v3.9.1 (2020-05-17)
- bug fix
v3.8.0 (2020-05-09)
- Fixed wrong value when paste the text in to input (Mix-mode)
v3.7.3 (2020-05-02)
- Bug fix
v3.7.2 (2020-04-28)
- Fixed Mixed Mode - Tags are in wrong order
v3.7.1 (2020-04-26)
- removed ARIA attributes from component wrapper element
v3.6.10 (2020-04-06)
- Bugs fixed
v3.6.6 (2020-04-04)
- Bugs fixed
v3.6.3 (2020-03-18)
- Bugs fixed
v3.6.1 (2020-03-05)
- Bugs fixed
v3.5.1 (2020-02-26)
- Bugs fixed
v3.4.1 (2020-02-08)
- Bugs fixed
v3.3.1 (2020-02-05)
- Bugs fixed
v3.3.0 (2020-01-26)
- Bugs fixed
v3.2.6 (2020-01-07)
- Bugs fixed
v3.2.3 (2019-12-23)
- Wrong value after edit/update a tag
v3.2.2 (2019-12-21)
- minor changes
v3.2.0 (2019-12-19)
- minor changes
v3.0.0 (2019-12-13)
- minor changes
v2.31.6 (2019-11-21)
- Bugfix
v2.31.4 (2019-11-16)
- Fixed Callback when removing a tag with backspace
v2.31.3 (2019-11-04)
- Fixed Callback when removing a tag with backspace
v2.31.2 (2019-10-14)
- Minor update
v2.31.1 (2019-10-14)
- Mix Mode Cursor Position on trying to delete a Tag using Backspace key.
v2.29.1 (2019-10-07)
- Do not normalize input value in "mixed" mode, to allow full control over the textarea to the developer, if anyone wishes their users to be able to do anything within the textarea or to control it outside of tagify.
v2.29.0 (2019-09-24)
- minor CSS bugfix.
v2.28.2 (2019-09-14)
- CSS bugfix.
v2.28.0 (2019-09-12)
- CSS bugfix.
v2.26.3 (2019-09-02)
- Fixed: Empty tag (via editing) *is* invalid, but remains, even with `keepInvalidTags: false`
v2.26.2 (2019-08-31)
- Fixed: Safari (11.1.2): Can't edit tags (includes proposed fix)
v2.26.1 (2019-08-31)
- Cleanup annoying "[addTags] no tags to add: Array []" console warning
v2.26.0 (2019-08-29)
- Fixed Syntax error in React wrapper compilation
v2.25.3 (2019-08-28)
- bugfix: when clicking anywhere on the screen there was an error in the console
v2.25.2 (2019-08-24)
- Fixed: conflict "RENDER SUGGESTIONS LIST MANUALLY" Property with "TEXTAREA"
- Fixed: Pasted text separated with new line symbol doesn't process correct
v2.24.0 (2019-08-18)
- Remove "hasMaxTags" class when limit is not reached anymore
v2.23.1 (2019-07-30)
- Remove "hasMaxTags" class when limit is not reached anymore
v2.22.3 (2019-06-19)
- Fixed Pressing Enter while Suggestion List is open
v2.22.2 (2019-06-16)
- Fixed Loading CSS Error
v2.22.1 (2019-06-06)
- "removeTag" without an argument now removes last tag automatically
- fixed Input value sent changed
v2.21.0 (2019-05-29)
- More bugs fixed
v2.19.0 (2019-05-15)
- More bugs fixed.
v2.19.0 (2019-05-15)
- More bugs fixed.
v2.18.2 (2019-05-02)
- fixed demo IE11 issues
v2.18.1 (2019-04-27)
- minor insignificant changes in code
v2.17.0 (2019-04-14)
- fixed a minor bug from previous commit
v2.16.0 (2019-04-11)
- Fixed: Incorrect interaction between enabled and maxItems for dropdown
v2.15.2 (2019-04-06)
- Fix exception when input initial value is an empty json list
v2.15.1 (2019-03-26)
- fixes dropdown mouse click to scroll
- fixes whitelist of strings suggestions list HTML
- fixes focus after clicking a suggestion item with the mouse
- added "searchBy" property support for whitelist alias filtering
v2.15.0 (2019-03-27)
- Bugfix
v2.14.0 (2019-02-27)
- fixed removeTag is not working.
v2.13.0 (2019-02-26)
- Deleting (backspacing) current tag input to the end, makes subsequent input change into tag immediately
v2.12.6 (2019-02-24)
- Bugfix
v2.12.1 (2019-02-15)
- Add duplicates in mix mode if duplicates setting false.
v2.11.1 (2019-01-27)
- Add duplicates in mix mode if duplicates setting false.
- Fixed placeholder does not update when changing dropdown active item using down arrow
v2.10.1 (2019-01-03)
- Make blacklist works case-insensitive
v2.9.7 (2018-12-30)
- Fixed Error when clicking outside of dropdown
v2.9.1 (2018-12-17)
- Changed the "input" event parameter to be a string (value) instead of an Object {value:value}
v2.9.0 (2018-12-16)
- added custom "click" event
v2.8.6 (2018-12-14)
- Bugfix
v2.8.5 (2018-12-10)
- minor fix for editable tags blur event not working property
v2.8.4 (2018-12-09)
- fixed: edit tag not running tag validation
v2.8.2 (2018-11-18)
- Fixed an issue while pre-populating an unique numeric tag
v2.7.6 (2018-11-18)
- Bugfix
v2.6.5 (2018-11-03)
- Fixed: Duplicates tag in Internet Explorer if tag has "@" symbol and delimiter is space bar.
v2.6.3 (2018-10-27)
- "input" event wasn't triggered in the optimal place. should be triggered after this.input.set
- "filterListItems" method should not strip whitespaces
v2.6.0 (2018-10-12)
- Bugfixes
v2.5.1 (2018-10-06)
- Bugfixes
v2.2.10 (2018-09-24)
- Bugfixes
v2.1.9 (2018-09-08)
- Fixed Trigger dropdown
v2.1.4 (2018-08-18)
- Tiny bug fix in "normalizeTags" where Tagify instances with complex whitelist didn't allow entering any other tags except the whitelist's ones
v2.1.1 (2018-08-12)
- You can add Tags in the readonly mode
v2.1.0 (2018-07-08)
- general refactoring
2018-06-24
- Fixed for key/value tags
2018-03-28
- Bootstrap 4 Support
This awesome jQuery plugin is developed by yairEO. For more Advanced Usages, please check the demo page or visit the official website.