
Tokens is a jQuery plugin that converts an input filed into a tagging/tokenizer input that breaks up what your user typed into tokens or tags, with suggestion/autocomplete box display.
See also:
How to use it:
1. Create a standard text input field.
<input type="text" id="demo"/>
2. Include the latest jQuery library and jQuery tokens plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="tokens.js"></script>
3. Call the plugin on the input field and add the autocomplete sources in the javascript.
<script> (function(){ $('#demo').tokens({ source : [ ... ], initValue : [ 'jQuery', 'jQuery Script Net' ] }); })(); </script>
4. Configurations.
<script> (function(){ $('#demo').tokens({ search : false, // The function against which are evaluated the suggestions. keyCode : { UP : 38, DOWN : 40, BACKSPACE : 8, TAB: 9, ENTER : 13, ESC : 27, COMMA : 188, SPACE: 32 }, texts : { // All appearing texts can be replaced by passing parameters within this object: 'close-text' : '×', 'type-suggestions' : 'Type to search values', 'no-results' : 'There are no results matching', 'add-result' : 'Add "%s" to the list', 'invalid-format' : '%s is not the correct format' }, cssClasses : { // All css classes can be replaced by passing parameters within this object 'token-list' : 'tokens-token-list', 'list-input-holder' : 'tokens-list-input-holder', 'list-token-holder' : 'tokens-list-token-holder', 'input-text' : 'tokens-input-text', 'delete-anchor' : 'tokens-delete-token', 'suggestion-selector' : 'tokens-suggestion-selector', 'suggestions-list-element' : 'tokens-suggestions-list-element', 'highlighted-suggestion' : 'tokens-highlighted-suggestion' }, maxSelected : 0, // Option to cap the ammount of tokens you can add. showSuggestionOnFocus : true, showMessageOnNoResults : true, // Option to show a message if no suggestions are available. allowAddingNoSuggestion : true, // Option that allows you to add a value on enter even if it's not on the suggestions. cleanInputOnHide : true, suggestionsZindex : 999, source : [], // Array of sources initValue : [], // Array of initial values you want to see added when plugin inits minChars : 0 }); })(); </script>
5. Add the following CSS styles in your CSS or include the tokens.css in your page.
ul.tokens-token-list { height: auto; width: 300px; border: 1px solid #aaaaaa; border-radius: 3px; cursor: text; z-index: 100; margin: 0; padding: 0; background: #ffffff; list-style-type: none; clear: both; overflow: auto; } ul.tokens-token-list, div.tokens-suggestion-selector { color: #e5e5e5; font-size: 12px; overflow: hidden; } ul.tokens-token-list > li { list-style-type: none; line-height: 1.5; float: left; } ul.tokens-token-list .tokens-input-text { outline: none; border: 0; padding: 3px 8px; background-color: #ffffff; } ul.tokens-token-list .tokens-input-text:focus { outline: 0; } ul.tokens-token-list .tokens-list-token-holder { overflow: hidden; height: auto; margin: 3px 0 3px 3px; padding: 1px 3px; background: #989898; cursor: default; border-radius: 3px; font-size: 11px; white-space: nowrap; } ul.tokens-token-list .tokens-list-token-holder p, ul.tokens-token-list .tokens-list-token-holder .tokens-delete-token { display: inline; padding: 0; } ul.tokens-token-list .tokens-list-token-holder p { margin: 0; } ul.tokens-token-list .tokens-delete-token { cursor: pointer; margin: 0 2px 0 5px; font-weight: bold; } div.tokens-suggestion-selector { border: 1px solid #aaaaaa; border-radius: 3px; background: #555555; -moz-box-shadow: 0 0 5px #888888; -webkit-box-shadow: 0 0 5px #888888; box-shadow: 0 0 5px #888888; } div.tokens-suggestion-selector p { margin: 0; padding: 5px; font-weight: bold; } div.tokens-suggestion-selector ul { list-style-type: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; } div.tokens-suggestion-selector ul li { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; padding: 5px; } div.tokens-suggestion-selector ul li.tokens-highlighted-suggestion { background: #444444; } div.tokens-suggestion-selector ul li:first-child { border-top: none; } div.tokens-suggestion-selector ul li:last-child { border-bottom: none; }
Changelog:
v2.0.0 (2019-04-13)
- Adding custom event to add tokens
v1.0.0-beta.3 (2017-04-09)
- Adding custom event to add tokens
v1.0.0-beta.2 (2017-03-02)
v0.6.0 (2014-09-15)
- Switched to use paste event.
- Adds in basic support to paste a comma separated list of items all at once.
v0.5.3 (2014-08-30)
- Check if theres input before throwing error
v0.5.2 (2014-08-23)
- Small fix for html being rendered in tester element
- Merge pull request #26 from firstandthird/feature/tweaks
- Fixed issue where message would not move when input dropped lines
v0.5.0 (2014-08-09)
- validate method can optionally return a modified string that will override the val.
v0.4.2 (2014-01-24)
- Fixes issue where item could be added multiple times.
- Adds error message when existing item is added.
- Fixes an issue where input isn't cleared when an item is added.
v0.4.1 (2014-01-19)
- Allows click to add with invalid message.
- Added invalid class when validations fails. Defaults to red.
- Changed validation to only run when text is about to be added.
- Added ability to click new suggestion and have it added.
- added example showing off validation
This awesome jQuery plugin is developed by firstandthird. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 13.04.2019
- Source