tokenfield v1.5.2

Tokenfield

Input field with tagging/token/chip capabilities written in raw JavaScript. Tokens in OS X or Chips in Android -
small UI elements which are inserted into various input fields that often combine with autocomplete functionality.

Tokens allow designers to display extra information about input. For example, in email applications when typing an
email address of the recipient, input field could display full name of the owner of a given email and a his/her picture.

This Tokenfield implementation is written in raw JavaScript without any extra dependencies like jQuery. it has one
somewhat opinionated behavior - Tokenfield intended use case is work with structured data. More specifically, it expects
autocomplete data to be JSOn formatted array of objects where each object contains token ID and token Name. More on that
below.

Examples

View live examples here.

Usage

Via JavaScript

Tokenfield could be applied to any visible <input /> element that allows users
to input text or number.

// Given that we have following HTML element: <input class="my-input" />
var tf = new Tokenfield({
  el: document.querySelector('.my-input')
});

This action would create Tokenfield wrapped around given input element. Without additional options, this Tokenfield
would allow users to add multiple token items without any specific restrictions. Only unique items are allowed, though,
so it is not possible to add multiple items such as: "foo", "bar", "foo". Only first "foo" would be added and the last
one discarded.

Data

As it was mentioned above - Tokenfield is intended to be used with structured data - array of objects. With default
options it expects that data returned by the autocomplete or filtered from a given set of items would look like that:

[{id: 1, name: 'Red'}, {id: 2, name: 'Blue'}, {id: 3, name: 'Greed'}, ... ]

You can see that each object has two properties - id and a name. With this format when you submit form where
Tokenfield is located, server would receive not an array of string, but an array of IDs.

However, that is a case only with tokens that are added via autocomplete. If Tokenfield accepts new tokens, then form
would send an additional array which would contain an array of strings.

Options

Remote Options

Below you will find list of options which are related to remote autocomplete requests. Options are set as properties
of an object assigned to remote property of the parent options object:

new Tokenfield({
  remote: {
    url: "http://example.com",
    ...
  }
});

Events

Tokenfield uses standard node.js EventEmitter and therefore supports such event as: 'on', 'once', 'removeAllListeners', 'removeListener'.

For more details on EventEmitter, please check official documentation page.

Available events are:

Helper Methods

Tokenfield has several overridable methods which allow user to remap given token data or change how some elements are
rendered.

Available methods are: