Home Bootstrap How to Input multiple tags using Tag Manager Jquery Plugin?

How to Input multiple tags using Tag Manager Jquery Plugin?

by Shahriar Sagor

Today now in this post i will show you How to Input multiple tags using Tag Manager Jquery Plugin? Here i am going to teach you how we can use tagmanager plugin for input the tag in bootstrap project. Now a days, we know that bootstrap is a very popular frontend framework and they are provide us the several plugins for any small things as like autocomplete, datepicker, colorpicker etc. So here tag Manager is jquery plugin but we can simply integrate this with our bootstrap project. So, now in this post i will give you a very basic example of the tagmanager.js plugin for input the tags.

By using the Tag Manager plugin we can make input tags function and it’s provide by the maxfavilli.com. Input tags will help us to add the multiple tags also with a good layout and also better way. If we need to the add multiple value into on a single text box then we can use this tag manager.

So in this example i will the use following files for css and js on that way we can make this simple example:

  1. bootstrap.min.css
  2. bootstrap.min.js
  3. jquery.min.js
  4. tagmanager.min.css
  5. tagmanager.min.js
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 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>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like