)component wrapper , tag items , suggestion list & suggestion items Shows suggestions selectbox (flexiable settings & styling) at full (component) width or next to* the typed texted (caret)aliases for easier fuzzy-searchingtag 1, tag 2, tag 3 or even newline-separated tagseditable (double-click)ARIA accessibility support(Component too generic for any meaningful ARIA)AJAX whitelist pulling)hellip by giving max-width to the tag element in your CSS (in /dist)events
Building the project gulp in your terminal, from the project's path (Gulp should be installed first).Source files are this path:
/src/Output files, which are automatically generated using Gulp, are in:
The rest of the files are most likely irrelevant.
Adding tags dynamically javascripttagify.addTags(["banana", "orange", "apple"])
// or add tags with pre-defined propeties
tagify.addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}])
`
Output value 1. Access the tagify's instance's
prop: tagify.value (Array of tags)original input's value: inputElm.value (Stringified Array of tags)The most common way is to simply listen to the
change event on the original input
`javascriptinputElm.addEventListener('change', onChange)
function onChange(e){
`
$3 Default format is a JSON string:
I recommend keeping this because some situations might have values such as addresses (tags contain commas):
Another example for complex tags state might be disabled tags, or ones with custom identifier class :(tags can be clicked, so delevopers can choose to use this to disable/enable tags)
To change the format, assuming your tags have no commas and are fairly simple:
js`Output:
Ajax whitelist whitelist ) from the server (as the user types) is a frequent need to many.Tagify comes with its own loading animation, which is a very lightweight CSS-only code, and the loading
which accepts true or false as arguments.Below is a basic example using the
fetch API. I advise to abort the last request on any input before starting a new request.Example:
`javascript// listen to any keystrokes which modify tagify's input
function onInput( e ){
// https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
// show loading animation and hide the suggestions dropdown
fetch('http://get_suggestions.com?value=' + value, {signal:controller.signal})
`
Edit tags can be edited by double-clicking them (by default)editTags setting to 1, making tags editable by single-clicking them.The value is saved on
blur or by pressing enter key. Pressing Escape will revert the change trigger blur.ctrl z will revert the change if an edited tag was marked as not valid (perhaps duplicate or blacklisted)To prevent all tags from being allowed to be editable, set the
editTags setting to false (or null).editable property set to false:
`html`
Drag & Sort To be able to sort tags by draging, a 3rd-party script is needed.
I have made a very simple drag & drop (~
unminified ) script which uses HTML5 native API andNPM or Github drag & drop script may possibly work. I could not find in the whole internet a decent lightweight script.
$3
`js// bind "DragSort" to Tagify's main element and tell
// must update Tagify's value according to the re-ordered nodes in the DOM
`
DOM Templates Object with your own custom functions which must return an HTML string .Available templates are:
wrapper, tag, dropdown, dropdownItem and the optional dropdownItemNoMatchView templates
Suggestions selectbox The selectbox dropdown will be appended to the document's
element and will be rendered by default in a position below (bottom of) the Tagify element.It is possible to tweak the selectbox dropdown via 2 settings:
-
enabled - this is a numeral value which tells Tagify when to show the suggestions dropdown, when a minimum of N characters were typed.maxItems - Limits the number of items the suggestions selectbox will render
`javascript`
Will render
html aaab
aaabb
aaabc
aaabd
aaabe
`By default searching the suggestions is using fuzzy-search (see settings ).
If you wish to assign alias to items (in your suggestion list), add the
property to whitelist items you wishalias for.In the below example, typing a part of a string which is included in the
searchBy property, for example land midd" -
$3
`javascript`Another handy setting is
which, like the above dropdown.searchBy setting, allowsvalue property of the whitelist items (if items are a Collection ).
$3
`javascript`// setting to search in other keys:
javascript`
Mixed-Content > To use this feature it must be toggled - see settings .
When mixing text with tags, the original textarea (or input) element will have a value as follows:
[[cartman]] and [[kyle]] do not know [[Homer simpson]]
If the inital value of the textarea or input is formatted as the above example, tagify will try to
& ]] to a tag, if tag exists in the whitelist , so makevalue property that match[[ & ]].Applying the setting
dropdown.position:"text" is encouraged for mixed-content tags, because the suggestions listIf a tag does not exists in the whitelist , it may be created by the user and all you should do is listen to the
add event and update your local/remote state.
Single-Value Similar to native
element, but allows typing text as value.
React A Tagify React component is exported from
react.tagify.js:> Note: You will need to inport Tagify's CSS also, either by javasceript or by SCSS
@import (which is preferable)`javascriptconst App = () => {
`To gain full acess to Tagify's inner methods, A custom
can be used:
$3
Angular TagifyComponent which will be used by your template as
Example:
clear add Tags
TagifyService
> (The tagifyService is a singletone injected by angular, do not create a new instance of it)
to your module definition.Example:
`typescript@Component({
constructor(private tagifyService: TagifyService) {}
onAdd(tagify) {
onRemove(tags) {
`
jQuery version
A jQuery wrapper verison is also available, but I advise not using it because it's basically the exact same as the "normal"
javascript`Accessing methods can be done via the
:
`javascript``
HTML input & textarea attributes The below list of attributes affect Tagify .settings Object manually, and not declerativly (via attributes).
Attribute | Example | Infopattern |
| Tag Regex pattern which tag input is validated by.placeholder | | This attribute's value will be used as a constant placeholder, which is visible unless something is being typed. | No user-interaction (add/remove/edit) allowed. | Automatically focus the the Tagify component when the component is loaded | Adds a required attribute to the Tagify wrapper element. Does nothing more.
FAQ
$3 Tagify does not accept just any kind of data structure.
Object, it must contain a unique property valueIncorrect
javascript`Correct
javascript`
javascript`
javascript`
javascript`
$3 In framework-less projects, the developer should save the state of the Tagify component (somewhere), andwhen should the state be saved? Tagify's internal state (
via the update() method).
`javascript// listen to "change" events on the "original" input/textarea element
// This example uses async/await but you can use Promises, of course, if you prefer.
`If you are using React/Vue/Angular or any "modern" framework, then you already know how to
/
