Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and tiny code footprint.

• Installation
• Selling points
• What can Tagify do
• Building the project
• Adding tags dynamically
• Ajax whitelist
• Suggestions selectbox
• Edit tags
• React wrapper
• Angular wrapper
• jQuery version
• Methods
• Events
• Settings

npm i @yaireo/tagify --save

// usage:
import Tagify from '@yaireo/tagify'

var tagify = new Tagify(...)

• JS minified ~17kb (~6kb GZIP)
• CSS minified ~5kb (~2kb GZIP) - well-crafted flexible code
• Easily change direction to RTL via the SCSS file only
• No other inputs are used beside the original, and its value is kept in sync
• Easily customized
• Exposed custom events (add, remove, invalid)
• Internet Explorer - A polyfill script can be used: tagify.polyfills.min.js in /dist

• Can be applied on input & textarea elements
• Supports mix content (text and tags together)
• Supports whitelist
• Supports blacklists
• Shows suggestions selectbox (flexiable settings & styling)
• Auto-complete input as-you-type (whitelist first match)
• Can paste in multiple values: tag 1, tag 2, tag 3
• Tags can be created by Regex delimiter or by pressing the "Enter" key / focusing of the input
• Validate tags by Regex pattern
• Tags are editable
• Supports read-only mode to the whole componenet or per-tag
• Each tag can have any properties desired (class, data-whatever, readonly...)
• Automatically disallow duplicate tags (vis "settings" object)
• Tags can be trimmed via hellip by giving max-width to the tag element in your CSS

Simply run 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: /dist/

The rest of the files are most likely irrelevant.

var tagify = new Tagify(...);

tagify.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"}])

There are two possible ways to get the value of the tags:

1. Access the tagify's instance's value prop: tagify.value (Array of tags)
2. Access the original input's value: inputElm.value (Stringified Array of tags)

It's possible to load a dynamic suggestions list (whitelist) from the server, as the user types.

Below is just an rough example using the fetch API. I advise in real-life scenario to abort the last request on any input

var input = document.querySelector('input'),
    tagify = new Tagify(input, {whitelist:[]}),
    controller; // for aborting the call

// listen to any keystrokes which modify tagify's input
tagify.on('input', onInput)

function onInput( e ){
  var value = e.detail;
  tagify.settings.whitelist.length = 0; // reset the whitelist

  // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  controller && controller.abort();
  controller = new AbortController();

  fetch('https://get_suggestions.com?value=' + value, {signal:controller.signal})
    .then(RES => RES.json())
    .then(function(whitelist){
      tagify.settings.whitelist = whitelist;
      tagify.dropdown.show.call(tagify, value); // render the suggestions dropdown
    })
}

The suggestions selectbox is shown is a whitelist Array of Strings or Objects was passed in the settings when the Tagify instance was created. Suggestions list will only be rendered if there were at least two sugegstions found. Matching suggested values is case-insensetive. The selectbox dropdown will be appended to the document's "body" element and will be positioned under the element. Using the keyboard arrows up/down will highlight an option from the list, and hitting the Enter key to select.

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

var input = document.querySelector('input'),
    tagify = new Tagify(input, {
        whitelist : ['aaa', 'aaab', 'aaabb', 'aaabc', 'aaabd', 'aaabe', 'aaac', 'aaacc'],
        dropdown : {
            classname : "color-blue",
            enabled   : 3,
            maxItems  : 5
        }
    });

Will render:

<div class="tagify__dropdown" style="left: 993.5px; top: 106.375px; width: 616px;">
    <div class="tagify__dropdown__item" value="aaab">aaab</div>
    <div class="tagify__dropdown__item" value="aaabb">aaabb</div>
    <div class="tagify__dropdown__item" value="aaabc">aaabc</div>
    <div class="tagify__dropdown__item" value="aaabd">aaabd</div>
    <div class="tagify__dropdown__item" value="aaabe">aaabe</div>
</div>

Tags which aren't read-only can be edited by double-clicking them.

The value is saved on blur or by pressnig enter key. Pressing Escaspe will revert the change trigger blur.

react.tagify.js

React component using the Tagify's Wrapper <Tags>:

import { Tags } from '@yaireo/tagify/dist/react.tagify'

// setup some basic Tagify settings object
var tagifySettings = {
    blacklist : ["fuck", "shit"]
}

// Demo "App" component that is using the Tagify React component (<Tags/>)
class App extends React.Component {
    constructor(props) {
        super(props);

        tagifySettings.callbacks = {
            add     : this.onTagifyAdd,
            remove  : this.onTagifyRemove,
            input   : this.onTagifyInput,
            invalid : this.onTagifyInvalid
        }
    }

    componentDidMount(){}

    // callbacks for all of Tagify's events:
    onTagifyAdd = e => {
        console.log('added:', e.detail);
    }

    onTagifyRemove = e => {
        console.log('remove:', e.detail);
    }

    onTagifyInput = e => {
        console.log('input:', e.detail);
    }

    onTagifyInvalid = e => {
        console.log('invalid:', e.detail);
    }

    // Render <Textarea> element and applies Tagify on it
    render(){
        return (
            <Tags mode='textarea'
                  autofocus={true}
                  className='myInput'
                  name='tags'
                  settings={tagifySettings}
                  initialValue='foo, bar, baz' />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

Live React Demo in Codepen

TagifyComponent which will be used by your template as <tagify>

Example:

<div>
  testing tagify wrapper
  <tagify [settings]="settings"
          (add)="onAdd($event)"
          (remove)="onRemove($event)">
  </tagify>
  <button (click)="clearTags()">clear</button>
  <button (click)="addTags()">add Tags</button>
</div>

TagifyService

(The tagifyService is a singletone injected by angular, do not create a new instance of it)

import {Component, OnDestroy} from '@angular/core';
import {TagifyService} from 'ngTagify';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {

  constructor(private tagifyService: TagifyService) {}
  public settings = { blacklist: ['fucking', 'shit']};

  onAdd(tagify) {
    console.log('added a tag', tagify);
  }

  onRemove(tags) {
    console.log('removed a tag', tags);
  }
  clearTags() {
    this.tagifyService.removeAll();
  }
  addTags() {
    this.tagifyService.addTags(['this', 'is', 'cool']);
  }
  ngOnDestroy() {
    this.tagifyService.destroy();
  }
}

jQuery.tagify.js

A jQuery wrapper verison is also available, but I advise not using it because it's basically the exact same as the "normal" script (non-jqueryfied) and all the jQuery's wrapper does is allowing to chain the event listeners for ('add', 'remove', 'invalid')

$('[name=tags]')
    .tagify()
    .on('add', function(e, tagName){
        console.log('added', tagName)
    });