Bootstrap – Input multiple tags example using Tag Manager Jquery Plugin
In this post we will give you information about Bootstrap – Input multiple tags example using Tag Manager Jquery Plugin. Hear we will give you detail about Bootstrap – Input multiple tags example using Tag Manager Jquery PluginAnd how to use it also give you demo for it if it is necessary.
Today, we are going to learn you how to use tagmanager plugin for input tag in bootstrap project.
Now days, we know bootstrap is very popular framework and they provide us several plugins for small things like autocomplete, datepicker, colorpicker etc. Tag Manager is jquery plugin but we can simply integrate with bootstrap. So, in this post i give you very basic example of tagmanager.js plugin for input tags.
Tag Manager plugin through we can make input tags function and it’s provide by maxfavilli.com. Input tags will help to add multiple tags with good layout and better way. If you need to add multiple value into on single text box then you can use tag manager.
In this example i use following files for css and js that way we can make simple example:
1) bootstrap.min.css
2) bootstrap.min.js
3) jquery.min.js
4) tagmanager.min.css
5) tagmanager.min.js
Ok, now you can see bellow example source code and also check demo goes on tags textbox, enter some text and press tab:
Preview:
Example:
<!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 >
<label>Name:</label>
<input type="text" name="name" >
</div>
<div >
<label>Add Tags:</label><br/>
<input type="text" name="tags" placeholder="Tags" />
</div>
<div >
<label>Details:</label>
<textarea ></textarea>
</div>
<div >
<button >Submit</button>
</div>
</form>
<script type="text/javascript">
$(".tm-input").tagsManager();
</script>
</body>
</html>
You can also get more information about tag manager plugin from here : Click Here.
Maybe it can help you…
Hope this code and post will helped you for implement Bootstrap – Input multiple tags example using Tag Manager Jquery Plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs