bootstrap-tagsinput

[Costas]

jQuery tags input plugin based on Twitter Bootstrap (v2.x / v3 compatible).

http://github.com/TimSchlechter/bootstrap-tagsinput

Twitter's typeahead don't work direct with Bootstrap 3

warning for bootstrap v3 typeahead you have to use bassjobsen/Bootstrap-3-Typeahead
http://github.com/bassjobsen/Bootstrap-3-Typeahead

ex.
-dont add the taginput markup
-use

<link rel="stylesheet" href="css/bootstrap-tagsinput.css"></link>
<script src="js/bootstrap-tagsinput.min.js"></script>
<script src="js/bootstrap3-typeahead.min.js"></script>

$('[name=aud_countries]').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});

<div class='form-group']
	<label>Countries :</label>
	<input type="text" name='aud_countries' class='form-control']
</div>

 
 
get tags :

//form serialized - ok
$('[name=ad_keywords]').val();

 
 
set tags :

$('[name=ad_keywords]').tagsinput('add', 'Washington', 'Sydney', 'Beijing');

 
 
fix width (to appear 100%) :

<!-- http://stackoverflow.com/a/25341322 -->
<style>
.bootstrap-tagsinput {
  width: 100% !important;
}
</style>

 
 
remove tags (modal closed event) :

$('[name=ad_keywords]').tagsinput('removeAll');

 

validate tags!
http://formvalidation.io/examples/bootstrap-tagsinput/

and Bootstrap Multi Email
http://github.com/ThinkBigPartners/bootstrap-multiEmail

alternative
http://aehlke.github.io/tag-it/
http://github.com/maxwells/bootstrap-tags