This plugin makes your input tags easy to handle and gives a magical look.It’s the easiest plugin to implement which makes your input look better.
You just have to add a javascript file and a CSS style sheet (hoping you already have jquery .js file) in to your project, since both of them are less in size it won’t make much difference in size of the overall project size.
You can download the files from Github
https://github.com/xoxco/jQuery-Tags-Input
Things are more simple once you have added those files into your project, Just create a real input field inside your own form which will contain comma separated values.
Ex:- <input id=”tags” name=”tags” type=”text” value=”val1,val2,val3″/>
Then, simply call the below function to make the input values as tags.
$(“#tags”).tagsInput();
And the options provided makes your work easier like the autocomplete parameter to provide the link for jquery auto complete file and it takes care of it.
isn’t it great?.
You can add or remove the tags in run time by addTag() or removeTag() functions respectively. And handling other things when they are created and removed is also made simple by specifying the call back functions during the initialization.
The complete options provided:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(selector).tagsInput({ 'autocomplete_url': url_to_autocomplete_api, 'autocomplete': { option: value, option: value}, 'height':'100px', 'width':'300px', 'interactive':true, 'defaultText':'add a tag', 'onAddTag':callback_function, 'onRemoveTag':callback_function, 'onChange' : callback_function, 'delimiter': [',',';'], // Or a string with a single delimiter. Ex: ';' 'removeWithBackspace' : true, 'minChars' : 0, 'maxChars' : 0, // if not provided there is no limit 'placeholderColor' : '#666666' }); |
if You’re really interested in jquery input tag autocomplete, you can try it from the below link
http://xoxco.com/projects/code/tagsinput/example.html
Please do share your opinion by commenting:)
Happy coding………,