Adding Multiple tags select using Tag Manager JQuery Plugin

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.

  1. Using CDN of Tags Manager directly to our project.
  2. Install the plugin through npm
    npm install --save max-favilli/tagmanager#v3.0.2
    Add node_modules/TagManager/tagmanager.js to headerscripts
    Add node_modules/TagManager/tagmanager.css to vendor.scss

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.

<html lang="">
<head>
<title>Input Type with multiple tags using Tag Manager Jquery Plugin</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<style>
.container{
  padding-top:2em;
}

.tm-tag.tm-tag-info {
    color: #fff;
    background-color: #007bff;
    border-color: #194a82;
}
a.tm-tag-remove {
    color: #fff !important;
    opacity: 0.4;
}
</style>
</head>
<body>
<div class="container">
  <form>
    <div class="form-group">
      <label>Tags added to input box</label><br/>
      <input type="text" name="tags" id="countryTags" placeholder="Add a new Tags" class="tm-input form-control tm-input-info"/>
    </div>

    <div class="form-group">
      <label>
        <a class="btn bg-primary text-white" onclick="setSetting('countryTags', $('input[name=hidden-tags]').val());">Save</a>
      </label>
    </div>
  </form>
</div>
<script type="text/javascript">
  $(".tm-input").tagsManager();

  $.get('/api/...........').then(function(res) {
      var tags_array = res.split(",");

      var e = jQuery.Event("keydown");
      e.which = 9;

      for (i = 0; i < tags_array.length; i++) {
          $('#countryTags').val(tags_array [i]);
          $('#countryTags').trigger(e);
      }
  });
</script>
</body>
</html>

 

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.