Skip to content
A javascript token field that is easy to use and customize.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
index.html
jstokenfield.css
jstokenfield.js
main.css

README.md

jstokenfield

A javascript token field that is easy to use and customize.

Demo

How to use it

Include the neccesary stylesheet and javascript files:

<link rel="stylesheet" type="text/css" href="jstokenfield.css" media="screen" />
<script src='jstokenfield.js'></script>

Include a simple div to hold your token field:

<div id="my-token-field" class="js-token-field"></div>

Instantiate the token field:

<script>
	var tokenField = new JSTokenField('my-token-field');
	
	// Optional event handling
	tokenField.onChange(function(content) {
		// Content has changed
	});
			
	tokenField.setValidator(function(text) {
	  // Add validation logic here
		return true;
	});
</script>

Public methods

onChange(handler)

handler

Type: Function(content)

A function to execute when the content changes. The content represents the token text values in form of an array


getContent()

Returns an array holding the text values of all the tokens in the token field.


setValidator(validator) Set validator method that is called for every token generated.

validator

Type: Function(text)

text The text value of the new token

A function to execute when a new token is about to be generated. Validator should return true if text is valid, false otherwise. If validator returns true, tokens will appear normal, else tokens are represented as invalid.


getValidContent()

Returns an array holding the text values of only the valid (based on the given validator) tokens in the token field.


getInvalidContent()

Returns an array holding the text values of only the invalid (based on the given validator) tokens in the token field.

You can’t perform that action at this time.