This time I will share jQuery Plugin and tutorial about Dynamic Autocomplete Tag Input Plugin For jQuery – Tokenize2, hope it will help you in programming stack.
Tokenize2 is an easy-to-use jQuery plugin for tokenizing text input that allows to select multiple tags from a drop down list populated with suggestions defined in the select element and/or an external JSON file (via AJAX requests).
Compatible with Twitter Bootstrap 3/4 framework.
How to use it:
1. Load the Tokenize2 and Bootstrap’s style sheets in the head section of the webpage.
1 |
<link rel="stylesheet" href="bootstrap.min.css"> |
2 |
<link rel="stylesheet" href="tokenize2.css"> |
2. Load jQuery library and the Tokenize2 plugin’s JavaScript file at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="tokenize2.js"></script> |
3. Load jQuery UI library to make the tags sortable (OPTIONAL).
1 |
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> |
4. Suppose you have a multiple select list as this:
01 |
<select class="demo" multiple> |
02 |
<option value="1">Acura</option> |
03 |
<option value="2">Audi</option> |
04 |
<option value="3">BMW</option> |
05 |
<option value="4">Cadillac</option> |
06 |
<option value="5">Chevrolet</option> |
07 |
<option value="6">Ferrari</option> |
08 |
<option value="7">Ford</option> |
09 |
<option value="8">Honda</option> |
10 |
<option value="9">Lexus</option> |
11 |
<option value="10">Mercedes-Benz</option> |
5. Call the function to convert the select element into a tag input.
1 |
$('.demo').tokenize2(); |
6. If you’d like to load auto suggestions from an external JSON file via AJAX requests.
1 |
$('.demo-1').tokenize2({ |
2 |
dataSource: 'remote.php' |
03 |
{"text": "Afghanistan", "value": "AF"}, |
04 |
{"text": "Åland Islands", "value": "AX"}, |
05 |
{"text": "Albania", "value": "AL"}, |
06 |
{"text": "Algeria", "value": "DZ"}, |
07 |
{"text": "American Samoa", "value": "AS"}, |
08 |
{"text": "Andorra", "value": "AD"}, |
09 |
{"text": "Angola", "value": "AO"} |
7. All configuration options with default values.
01 |
$('.demo').tokenize2({ |
07 |
tokensAllowCustom: false, |
13 |
dropdownSelectFirstItem: true, |
20 |
searchFromStart: true, |
23 |
searchHighlight: true, |
29 |
displayNoResultsMessage: false, |
30 |
noResultsMessageText: 'No results mached "%s"', |
52 |
allowEmptyValues: false, |
8. Event handlers.
01 |
$('.demo').on('tokenize:load', function(e){ |
05 |
$('.demo').on('tokenize:clear', function
|
