Tokenfield
JSON formatted array of objects where each object contains token
ID and token Name.Tokenfield could be applied to any visible
<input> element that allows users to input text or number.
Without additional options, this Tokenfield would allow users to add
multiple token items without any specific restrictions.
Token input field is adapted for input groups. It shares global
input styling with .form-control elements for consistency and
can be used with different elements: inputs, selects, text addons, button
addons, icons etc.
You can either use a regular input field placeholder or set it
in tokenfield configuration. If placeholder option is set to
null (default), tokenfield will try to use placeholder attribute from the
original element set in el.
By default, token field allows user to add custom tokens instead
of using preset list of tokens or tokens retrieved from the server. To
disable this behaviour and limit selection to the tokens from the list. set
newItems option to false.
Tokenfield allows user to select or add multiple number of
tokens, in fact there is no limit. In some cases you can disable multiple
tokens in the field and allow only 1. To do that, set multiple
optino to false.
You can also limit the number of selected tokens in the input
field. Use maxItems: [number] to add a limit. The default value
is 0, which allows user to enter as many items as possible.
Here you can't enter more than 2 tokens.
Tokenfield can be configured to do matching only from the
beginning of the string - it compiles match regex to
basicall this format: /^{value}/i. To use this feature, set
matchStart option to true.
Tokenfield can be configured to do matching only from the
end of the string - it compiles match regex to basicall
this format: /{value}$/i. To use this feature, set
matchEnd option to true.
If addItemOnBlur option is set to
true, new item will be added to the tokenfield on input blur.
Either sets new item or first match from suggested list. To test it, type
something and click outside the field.
You can specify certain characters/sets of characters to be used
as delimiters during tokenization or input events on tokenfield. Use
delimiters option with an array of delimiters. In this example
new token is added every time you press , key.
If addItemsOnPaste config option is set to
true, new items will be added to the tokenfield on paste.
Tokenization happens using delimiters options listed above. Try to copy and
paste some text to see it in action.
By default, user needs to type at least 2 characters to see the
list of matches. This number can be controlled with minChars
option. This example allows you to enter 1 character to see the list of all
matches. Type "A" to see it in action.
Tokenfield also works with remote data source stored in JSON
file. Options are set as properties of an object assigned to remote property
of the parent options object. In this example all tokens are loaded from
car_brands.json file.
Tokenfield has several overridable methods which allow user to remap given token data or change how some elements are rendered. In this example Tokenfield fetches remote data for autocomplete and renders labels in capital letters
