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 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.