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:

• Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input
• jQuery Tags Manager with Twitter Bootstrap - tagmanager
• jQuery Tag & Token Input Plugin For Bootstrap - Bootstrap Tokenfield

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)

• Updated

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.