Once in a while you need to implement a tag functionlity, where you will be able to add any tag you need then send it by a form or ajax in a server side to save it in a database. In this article I will show you how I did when I had to implement this type of functionality. Even if a found a lot of plugins on google I finnlly stayed at bootstrap tags because is very easy to implement and has a lot of features we will talk about them a little later.

Among its features are the following:

• itemAddedOnInit - this method will run at plugin initialization, and the default tags will trigger this event.
• beforeItemAdded - before a tag to be added in the input this event will be triggered.
• itemAdded - this event should be triggered when a new tag is added in the input, not when predefined tags are added but there is an issue there and this event will be triggered even if the tag is predefined, but in the following I will show you how to deal with this error, you need to add 2 more lines of code in the bootstrap tags script.
• beforeItemRemoved - this event will be triggered before deleting a tag, I suppose this should be used to make you sure the user really want to delete a certain tag.
• itemRemoved - as the event's name says, this event will be triggered when a tag is removed from front end so you can remove it from the database too.

I used this plugin because is very easy to customize and besides these events, the plugins come with a lot of options and features. If you want to take a look at the plugin's documentation you can see it here.

How to init the plugin:

jQuery('.tags_container #your_input').tagsinput({ 
    tagClass: 'tag label label-info'
});

With the above code you will initiate the plugin and your plugin should change so you can add new tags. Anyway the above code will create only the frontend functionality, so far you have no event to trigger any action. For example if you site is a real time application you will have to know every time a user will add a new tag, to achive this we will need the following code:

jQuery('.tags_container #your_input').on('itemAdded', function(event) {
  var tag = event.item;
  console.log(tag);
  you_custom_ajax_function(tag);
});

With this function every time the use will create a new tag you will know and you can deal with it. "event.item" is the command which will return to you the tag which jsut has been added, from here you will know what you should do with it.

As I said earlier, even if this plugin is very easy to use and very customizable it has an error, maybe I got an old script when I used this plugin, but when I tried to implement it, the beforeItemAdded and itemAdded both started at the same time, somehow the plugin doesn't know if the tags are predefined or not and I added few lines of code in the script and now is working great. If you deal with the same problem as me in this article I will show you how I solved the bootstrap tag issue with predefined tags.