How to use bootstrap boot tags

Question

I am trying to use Bootstrap Tags Input Plugin without Typeahead. I have included the 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 looks like this:

 <script> $('#tagPlaces').tagsinput({ allowDuplicates: true }); </script> 

The part of the JSP form where the plugin is used:

 <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 can not see the tags in the input field. Also my form is submitted when I press Enter for the tag. Please suggest what I am missing and what is the correct way to use the plugin.

Answer 1

This is how i did it

 <script src="../js/bootstrap-tagsinput.js"></script> no more javascript 

Css
You can include source tags for bootstrap input css file

 <link rel="stylesheet" href="../css/bootstrap-tagsinput.css"> 

Or you can just use just 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">