This time I will share jQuery Plugin and tutorial about Select Multiple Tags From An Autocomplete Dropdown – jQuery Tagcomplete, hope it will help you in programming stack.
| File Size: | 18.4 KB |
|---|---|
| Views Total: | 6001 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The Tagcomplete jQuery plugin converts the normal input field into a dynamic, customizable tags/tokens input with autocomplete support.
The users are able to select multiple tags/tokens from a predefined dropdown list as they type. Supports both static and dynamic data rendering (via AJAX).
How to use it:
1. Insert the latest version of jQuery library and tagcomplete plugin into the html page.
1 |
<link rel="stylesheet" href="src/tagcomplete.css"> |
2 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
3 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin="anonymous"></script> |
5 |
<script src="src/tagcomplete.js"></script> |
2. Create an input field and define the pre-selected tags in the value attribute.
1 |
<input type="text" class="tags_input" value="dog,cat,elephant"> |
3. Define an array of tags/tokes for the autocomplete list.
01 |
const data = [ |
02 |
'cow', |
03 |
'goat', |
04 |
'pig', |
05 |
'snake', |
06 |
'hamster', |
07 |
'elephant', |
08 |
'lion', |
09 |
'tiger', |
10 |
'monkey', |
11 |
'lizard', |
12 |
'bird', |
13 |
'crocodile', |
14 |
'gazelle', |
15 |
'antelope' |
16 |
]; |
4. Attach the function to the input field and done.
1 |
$(".tags_input").tagComplete( |
2 |
autocomplete: { |
3 |
data: data |
4 |
} |
5 |
}); |
5. Default customization options.
01 |
$(".tags_input").tagComplete( |
02 |
03 |
// wether the tagcomplete input should be hidden or not |
04 |
hide: false, |
05 |
06 |
// input limit to start the ajax |
07 |
keyLimit: 1, |
08 |
09 |
// tokenizer |
10 |
tokenizer: ",", |
11 |
12 |
// allows users to insert their own data |
13 |
freeInput : true, |
14 |
15 |
// allows usert to edit the tags input |
16 |
freeEdit : true, |
17 |
18 |
// autocomplete options |
19 |
autocomplete: { |
20 |
21 |
// data |
22 |
data: [], |
23 |
24 |
// ajax options |
25 |
ajaxOpts: { |
26 |
//url: "", |
27 |
method: 'GET', |
28 |
dataType: 'json', |
29 |
data: {} |
30 |
}, |
31 |
32 |
// remote query parameters |
33 |
params : function(value){ |
34 |
return {q: value,lol: 23}; |
35 |
}, |
36 |
37 |
// proccess data |
38 |
proccessData: function(data){ |
39 |
return data; |
40 |
} |
41 |
42 |
} |
43 |
|
44 |
}); |
6. Do something after a tag is added or deleted.
01 |
$(".tags_input").tagComplete( |
02 |
03 |
// when a new tag is added |
04 |
onAdd: function(data){ |
05 |
return true; |
06 |
}, |
07 |
08 |
// when a tag is deleted |
09 |
onDelete: function(data){ |
10 |
return true; |
11 |
} |
12 |
13 |
}); |
This awesome jQuery plugin is developed by razzbee. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
