I am trying to use Bootstrap Tags Input plugin without Typeahead. I have included following files:
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="../../tagsinput/js/bootstrap-tagsinput.min.js"></script>
The script is as below:
<script>
$('#tagPlaces').tagsinput({
allowDuplicates: true
});
</script>
Part of JSP form where using the plugin:
<div class="form-group">
<label for="tagPlaces" class="col-sm-2 control-label">Tag Places</label>
<div class="col-sm-10">
<input type="text" class="form-control" data-role="tagsinput" id="tagPlaces">
</div>
</div>
But I am not able to see the tags in the input field. Also my form is getting submitted as I press enter for the tag. Please suggest what am I missing and what is the correct way of using the plugin.
This is how i did it
<script src="../js/bootstrap-tagsinput.js"></script>
no more javascript
Css
You can include the original bootstrap tags input css file
<link rel="stylesheet" href="../css/bootstrap-tagsinput.css">
Or you can just use only this
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
And HTML
<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">