Last few days, I am searching for a good and small plugin to add multiple select tags in an input box. The Tags Manager v3.0.2 project on GitHub link. The v3.0.2 work nicely on bootstrap 4 and JQuery 3.2.1. We can use this plugin in two ways.
- Using CDN of Tags Manager directly to our project.
- Install the plugin through npm
Here I have added the link to the Tag manager documents site and you can look for further information. In this example, I add simple single input text box, where can add multiple values separate them with enter, comma, or tab. All the multiple tags value to input are attached to hidden input called hidden-tags and we can save this multiple values to our remote server. I also add code to retrieve all the added multiple tags from a remote server through HTTP GET methods and add all the value back
to input box so that we can delete or edit the value of our tags. Replace our demo HTTP get methods with your own API.
Once we retrieve the multiple tags value from the remote server, we have to add it back to our input tags. First, I retrieve all value from a remote server and add it to an array called tags_array. This array contains all the tags value. Second, we have to loop through each string in a tags_array and have to add each string value to input text. While adding each string to input we have to trigger a tab event where number 9 indicate event with tabs this value-add our retrieve string to our hidden input text.