Minimal Input Tokenizer Plugin For jQuery - tokenizer.js

File Size: 20.9 KB
Views Total: 4055
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Input Tokenizer Plugin For jQuery - tokenizer.js

tokenizer.js is an easy-to-use jQuery tag/token input plugin which allows you to formats the text into tags/tokens when a Space, Enter, or Comma is entered. 

Also supports the autocomplete functionality that enables you to select tags/tokens from a suggestion list while typing.

How to use it:

1. Place the minified version of the tokenizer.js plugin after jQuery JavaScript library.

<script src="" 
<script src="tokenizer.min.js"></script>

2. Create a normal text field for the tag/token input.

<input id="example" type="text">

3. Enable the plugin with default options.


4. The xample styling for the tokenizer plugin.

.tknz-wrapper { /* The apparent input */
  width: 350px;
  height: 250px;
  margin: 50px auto;
  padding: 10px;
  overflow: auto;
  color: #fefefe;
  background: #fefefe;
  font-family: "Courier", Times, sans-serif;
  border: solid 2px #DFDFDF;
  border-radius: 10px;

.tknz-focus { /* Apparent input in active state */
  box-shadow: 0px 0px 6px #5c7db7;
  border: solid 2px transparent;

.tknz-wrapper-label { /* Label for the field */
  float: left;
  color: #000;
  margin: 5px 5px 0 2px;

.tknz-input { /* The actual input */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  width: 112px;
  margin: 2px;
  border: none;
  outline: none;
  background: transparent;

.tknz-input-wrapper {
  float: left;
  position: relative;
  top: 4px;

.tknz-token { /* An individual token */
  background: #5c7db7;
  padding: 2px 2px 2px 5px;
  margin: 2px;
  float: left;
  border-radius: 2px;
  max-width: 340px;
  cursor: pointer;

.tknz-token-label { /* Token's label */ word-break: break-word; }

.tknz-token-x { /* Delete button for token */
  color: rgba(255,255,255, 0.5);
  padding-left: 7px;
  position: relative;
  top: 1px;

.tknz-token-x:hover {
  text-shadow: 0px 0px 3px #eee;
  color: #fff;

.tknz-suggest {
  position: absolute;
  top: 27px;
  left: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 3px rgba(120,120,120, 0.3);

.tknz-suggest ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  text-align: left;

.tknz-suggest-li {
  color: #000;
  padding: 0px 5px;

.tknz-suggest-li:nth-child(2n) { background-color: #f0f0f0; }

.tknz-suggest-li.tknz-sel {
  color: #fff;
  background-color: #5c7db7;

/** MEDIA **/

@media screen and (max-width: 480px) {

.tknz-input { width: 90%; }

5. Optionally, you can set the data source for the autocomplete. If a function is given, it should take two parameters: the first will be the input word; the second is a function which should be called with a list of terms to suggest. If you're using Ajax, call this function after your response from the server is received, passing an array as the only parameter.

  source: ['jquery','script','net']

6. More customization options.


  // delete button
  xContent: '&times;',

  // namespace
  namespace: 'tknz',

  // default label text
  label: 'Tags:',

  // default placeholder text
  placeholder: '',

  // default separators
  separators: [',', ' ', '.'],
  // allows unknown tags
  allowUnknownTags: true,

  // max number of suggestions
  numToSuggest: 5,
  // allows duplicate tags
  allowDuplicates: false

7. Callback function available.


  // called when the tag/token list changes.
  callback: function ($input) {},  

  // called when a tag/token is clicked.
  onclick: function (word) {}


8. API methods.

var instance = $('#example').tokenizer({
    // options here


// gets an array of selected tags/tokens

// adds a new tag/token
instance.tokenizer('push', 'jquery');

// gets the most recent tag/token

// removes a tag/token
instance.tokenizer('remove', 'YOLO');

// clear the tag/token input

// destroy the plugin

// triggers the callback function

This awesome jQuery plugin is developed by donmccurdy. For more Advanced Usages, please check the demo page or visit the official website.