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
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.scssHere I have added the link to the Tag manager documents site and you can look for further information. In this example, I add a simple single input text box, where can add multiple values separated with entering, comma, or tab.
All the multiple tags values to input are attached to hidden input called hidden-tags and we can save these 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 values back to the input box so that we can delete or edit the value of our tags. Replace our demo HTTP get methods with your own API.
Example of Tag Manager JQuery Plugin
<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 values from a remote server and add them to an array called tags_array. This array contains all the tag’s values.
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 the input we have to trigger a tab event where number 9 indicates event with tabs this value-add our retrieve string to our hidden input text.
