Dynamic Autocomplete Tag Input Plugin For jQuery - Tokenize2

Dynamic Autocomplete Tag Input Plugin For jQuery - Tokenize2
File Size: 28.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Tokenize2 is an easy-to-use jQuery plugin for tokenizing text input that allows to select multiple tags from a drop down list populated with suggestions defined in the select element and/or an external JSON file (via AJAX requests). Compatible with Twitter Bootstrap 3/4 framework.

How to use it:

1. Load the Tokenize2 and Bootstrap's style sheets in the head section of the webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="tokenize2.css">

2. Load jQuery library and the Tokenize2 plugin's JavaScript file at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="tokenize2.js"></script>

3. Load jQuery UI library to make the tags sortable (OPTIONAL).

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

4. Suppose you have a multiple select list as this:

<select class="demo" multiple>
  <option value="1">Acura</option>
  <option value="2">Audi</option>
  <option value="3">BMW</option>
  <option value="4">Cadillac</option>
  <option value="5">Chevrolet</option>
  <option value="6">Ferrari</option>
  <option value="7">Ford</option>
  <option value="8">Honda</option>
  <option value="9">Lexus</option>
  <option value="10">Mercedes-Benz</option>
</select>

5. Call the function to convert the select element into a tag input.

$('.demo').tokenize2();

6. If you'd like to load auto suggestions from an external JSON file via AJAX requests.

$('.demo-1').tokenize2({
  dataSource: 'remote.php'
});
// JSON
[
  {"text": "Afghanistan", "value": "AF"},
  {"text": "Åland Islands", "value": "AX"},
  {"text": "Albania", "value": "AL"},
  {"text": "Algeria", "value": "DZ"},
  {"text": "American Samoa", "value": "AS"},
  {"text": "Andorra", "value": "AD"},
  {"text": "Angola", "value": "AO"}
]

7. All configuration options with default values.

$('.demo').tokenize2({

  // max number of tags
  tokensMaxItems: 0,

  // allow you to create custom tokens
  tokensAllowCustom: false,

  // max items in the dropdown
  dropdownMaxItems: 10,

  // minimum of characters required to start searching
  searchMinLength: 0,

  // specify if Tokenize2 will search from the begining of a string
  searchFromStart: true,

  // choose if you want your search highlighted in the result dropdown
  searchHighlight: true,

  // custom delimiter
  delimiter: ',',

  // data source
  dataSource: 'select',

  // waiting time between each search
  debounce: 0,

  // custom placeholder text
  placeholder: false,

  // enable sortable
  // requires jQuery UI
  sortable: false,

  // tabIndex
  tabIndex: 0
  
});

Change log:

2017-05-06

  • Fix shift tab

2017-05-05

  • Add auto z-index for dropdown

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