Select Multiple Items From a Predefined List or Ajax | Tokenize2

How to make use of it:

1. Load the Tokenize2 and Bootstrap’s type sheets within the head part 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 on the backside 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.

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

4. Suppose you have got a a number of choose select 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 perform to transform the choosing factor right into a tag input.

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

6. If you’d prefer to load auto ideas from an exterior JSON file by way of 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 choices 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,

  // allow you to choose if the first item is automatically selected on search
  dropdownSelectFirstItem: true,

  // minimum/maximum of characters required to start searching
  searchMinLength: 0,
  searchMaxLength: 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: ',',

  // display no results message
  displayNoResultsMessage: false,
  noResultsMessageText: 'No results mached "%s"',

  // 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,

  // allows empty values
  allowEmptyValues: false,
  
  // z-inde
  zIndexMargin: 500
  
});

8. Event handlers.

$('.demo').on('tokenize:load', function(e){
  // do something
});

$('.demo').on('tokenize:clear', function(e){
  // do something
});

$('.demo').on('tokenize:remap', function(e){
  // do something
});

$('.demo').on('tokenize:focus', function(e){
  // do something
});

$('.demo').on('tokenize:deselect', function(e){
  // do something
});

$('.demo').on('tokenize:search', function(e, searchValue){
  // do something
});

$('.demo').on('tokenize:paste', function(e){
  // do something
});

$('.demo').on('tokenize:clear', function(e){
  // do something
});

$('.demo').on('tokenize:dropdown:up', function(e){
  // do something
});


$('.demo').on('tokenize:dropdown:down', function(e){
  // do something
});


$('.demo').on('tokenize:dropdown:clear', function(e){
  // do something
});


$('.demo').on('tokenize:dropdown:show', function(e){
  // do something
});

$('.demo').on('tokenize:dropdown:hide', function(e){
  // do something
});

$('.demo').on('tokenize:dropdown:fill', function(e, items){
  // items: [array of object]
});

$('.demo').on('tokenize:dropdown:itemAdd', function(e, value){
  // do something
});

$('.demo').on('tokenize:keypress', function(e, routedEvent){
  // do something
});

$('.demo').on('tokenize:keydown', function(e, routedEvent){
  // do something
});

$('.demo').on('tokenize:keyup', function(e, routedEvent){
  // do something
});

$('.demo').on('tokenize:tokens:reorder', function(e){
  // do something
});

$('.demo').on('tokenize:tokens:add', function(e, value, text, force){
  // value   The token value
  // text    The token display text
  // force   Must be true if tokensAllowCustom is false
});

$('.demo').on('tokenize:tokens:added', function(e, value, text){
  // value   The token value
  // text    The token display text
});

$('.demo').on('tokenize:tokens:remove', function(e, value){
  // do something
});

Dynamic Autocomplete Tag Input Plugin, Tokenize2 Github, tags input with autocomplete ajax

See Demo And Download