Simple jQuery Tagging & Tokenizer Input with Autocomplete - Tokens

File Size: 69.5 KB
Views Total: 27022
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Tagging & Tokenizer Input with Autocomplete - Tokens

Tokens is a jQuery Native JavaScript plugin that converts an input filed into a tagging/tokenizer input that breaks up what your user typed into tokens or tags, with suggestion/autocomplete box display.

See also:

How to use it:

1. Include the latest version of the Tokens plugin on the webpage.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@firstandthird/tokens@latest/lib/tokens.css" />
<script src="https://cdn.jsdelivr.net/npm/@firstandthird/tokens@latest/dist/tokens.bundle.js"></script> 

2. Prepare your autosuggest data in the tokens.json.

// tokens.json
[
  {
    "value": "one",
    "name": "One"
  },
  {
    "value": "two",
    "name": "Two"
  },
  {
    "value": "three",
    "name": "Three"
  }
]

3. Build the HTML for the Tagging & Tokenizer Input. That's it.

<div data-module="Tokens" 
     data-module-endpoint="tokens.json?q=${term}" 
     data-module-strict="false" 
     data-action="focus" 
     data-module-initial="One, Two">
     <div data-name="tokensContainer"></div>
     <input type="text"
        name="value"
        data-name="input"
        data-action="search"
        data-action-type="input"
        placeholder="Search for something">
     <div data-name="resultsContainer"></div>
</div>

Changelog:

v2.1.0 (2019-07-03)

v2.0.0 (2019-04-13)

  • Adding custom event to add tokens

v1.0.0-beta.3 (2017-04-09)

  • Adding custom event to add tokens

v1.0.0-beta.2 (2017-03-02)

  • major update.

v0.6.0 (2014-09-15)

  • Switched to use paste event.
  • Adds in basic support to paste a comma separated list of items all at once.

v0.5.3 (2014-08-30)

  • Check if theres input before throwing error

v0.5.2 (2014-08-23)

  • Small fix for html being rendered in tester element
  • Merge pull request #26 from firstandthird/feature/tweaks
  • Fixed issue where message would not move when input dropped lines

v0.5.0 (2014-08-09)

  • validate method can optionally return a modified string that will override the val.

v0.4.2 (2014-01-24)

  • Fixes issue where item could be added multiple times.
  • Adds error message when existing item is added.
  • Fixes an issue where input isn't cleared when an item is added.

v0.4.1 (2014-01-19)

  • Allows click to add with invalid message.
  • Added invalid class when validations fails. Defaults to red.
  • Changed validation to only run when text is about to be added.
  • Added ability to click new suggestion and have it added.
  • added example showing off validation

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