Simple jQuery Tagging & Tokenizer Input with Autocomplete - Tokens

Simple jQuery Tagging & Tokenizer Input with Autocomplete - Tokens
File Size: 8.77 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.