May 07, 2024 | jQuery Bootstrap Javascript
Hello Dev,
Today, we'll delve into using the Tag Manager plugin for input tags in Bootstrap projects.
Bootstrap has gained immense popularity as a framework, offering a plethora of plugins for various functionalities like autocomplete, datepicker, colorpicker, etc. Tag Manager is a jQuery plugin that seamlessly integrates with Bootstrap. In this post, I'll provide a basic example of how to utilize the tagmanager.js plugin for input tags.
The Tag Manager plugin, provided by maxfavilli.com, enhances input tags by allowing users to add multiple tags with a visually appealing layout. If you require the ability to input multiple values into a single text box, Tag Manager is the solution. Let's explore how to integrate and utilize this plugin effectively.
To integrate the TagManager plugin for input tags in a Bootstrap project, follow these steps to create a simple example. This guide assumes you have a basic understanding of HTML, CSS, and JavaScript, and that you're familiar with Bootstrap.
Read Also: Creating a Simple Image Gallery With PHP & Jquery
<<!DOCTYPE html>
<<html>
<<head>
<<title>Bootstrap - Input multiple tags example using Tag Manager Jquery Plugin<</title>
<<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
<<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"><</script>
<<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"><</script>
<<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"><</script>
<</head>
<<body>
<<form>
<<div class="form-group">
<<label>Name:<</label>
<<input type="text" name="name" class="form-control" >
<</div>
<<div class="form-group">
<<label>Add Tags:<</label><br/>
<input type="text" name="tags" placeholder="Tags" class="tm-input form-control tm-input-info"/>
</div>
<div class="form-group">
<label>Details:</label>
<textarea class="form-control"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
<script type="text/javascript">
$(".tm-input").tagsManager();
</script>
</body>
</html>
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"