Select Multiple Items From a Predefined List or Ajax | Tokenize2

select-multiple-items-tokenize2

Tokenize2 is a plugin that allows users to select multiple items from a predefined list or ajax, using autocomplete as you type to find each item. You may have seen a similar type of text entry when filling in the recipient field by sending messages on Facebook or tags on Tumblr.

jquery tags input autocomplete, jquery tags input plugin with typeahead autocomplete, bootstrap tags input with autocomplete, jquery tags input autocomplete ajax

  • An intuitive user interface to select multiple items from a large list.
  • Easy to skin/style purely in CSS, no images required.
  • Supports any backend that can generate JSON, including PHP, Rails, Django, and ASP.net
    events based.
  • Select and delete items and navigate with the mouse or keyboard.
  • Custom Settings
  • Sortable items
  • jQuery 2+
  • Bootstrap 3+

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

Official Website(dragonofmercy): Click Here

This superior jQuery/javascript plugin is developed by dragonofmercy. For extra Advanced Usages, please go to the official website.