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