![]() Takes a tag input as argument and returns a transformed value Object consisting of functions which return template strings any other value than 1 or 2 will disable editing Number of clicks on a tag to enter "edit" mode. when reached, adds a class "hasMaxTags" to Tries to autocomplete the input's value while typing (match from whitelist)Īn array of tags which only they are allowedĪutomatically adds the text which was inputed as a tag when blur event happensĮxposed callbacks object to be triggered on events: 'add' / 'remove' tags Should ONLY use tags allowed in whitelist Everything between these will become a tag The 'pattern' setting must be set to some character. Use select for single-value dropdown-like select box. Validate input by REGEX pattern (can also be applied on the input itself as an attribute) Ex: // If this attribute is set on an input/textarea element it will override this setting Suggestions dropdown item selected (by mouse/keyboard/touch) ![]() Suggestions dropdown has been removed from the DOM The dropdown DOM node is passed in the callback, see demo. Exposes the tag element, its index & data e.detail exposes value, inputElm & isValidĬlicking a tag. Input event, when a tag is being typed/edited. Returns the index of a specific tag, by valueĬonverts a String argument ( ] and ] are.) into HTML with mixed tags & textsĪ tag has been added but did not pass vaildation. This method gets called automatically when instansiating Tagify. When nothing passed, removes last tag (see source code)Ĭonverts the input's value into tags. Argument is the tag DOM element to be removed, or value. Removes all tags and resets the original input tag's value propertyĪccepts a String (word, single or multiple with a delimiter), an Array of Objects (see above) or Strings Reverts the input element back as it was before Tagify was applied Limit the length of a tag value (minimum & maximum).Double-click tag fires both "edit" & "click" custom events.tagify ( ) // get tags from the server (ajax) and add them: $ ( '' ). (The tagifyService is a singletone injected by angular, do not create a new instance of it) Tagif圜omponent which will be used by your template as ReactĪ Tagify React component is exported as from :Ĭheck the live demo for a live React integration example Angular Sure when the Tagify instance is initialized, that it has tags with the correct value property that match If the inital value of the textarea or input is formatted as the above example, tagify will try toĪutomatically convert everything between ] to a tag, if tag exists in the whitelist, so make When mixing text with tags, the original textarea (or input) element will have a value as follows: ] and ] do not know ] To use this feature it must be toggled - see settings. querySelector ( 'input' ), tagify = new Tagify ( input, , The rest of the files are most likely irrelevant. Output files, which are automatically generated using Gulp, are in: /dist/ Simply run gulp in your terminal, from the project's path ( Gulp should be installed first). ![]() Tags can be trimmed via hellip by giving max-width to the tag element in your CSS.Automatically disallow duplicate tags (vis "settings" object).Each tag can have any properties desired (class, data-whatever, readonly.).Supports read-only mode to the whole componenet or per-tag.Tags can be created by Regex delimiter or by pressing the "Enter" key / focusing of the input.Can paste in multiple values: tag 1, tag 2, tag 3.Auto-complete input as-you-type (whitelist first match).Allows setting aliases to suggestions for easier searching.Shows suggestions selectbox (flexiable settings & styling).Supports mix content (text and tags together).Can be applied on input & textarea elements.Internet Explorer - A polyfill script can be used: in /dist.Easily change direction to RTL (via the SCSS file).No other inputs are used beside the original, and its value is kept in sync.Easily customized, plenty of settings for common scenarios.CSS minified ~5kb ( ~2kb GZIP) - generated from SCSS with variables.Usage (in your bundle): import Tagify from tagify = new Tagify(.)ĭon't forget to include tagify.css file in your project.ĬSS location: location: See SCSS usecase & example Selling points With great performance and tiny code footprint. Transforms an input field or a textarea into a Tags component, in an easy, customizable way,
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |