Markup
Markup
Just add
data-role="tagsinput"
to your input field to automatically change it to a tags input field.
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
Categorizing tags
Categorizing tags
You can set a fixed css class for your tags, or determine dynamically by provinding a custom function.
<input type="text" /> <script> $('input').tagsinput({ tagClass: function(item) { switch (item.continent) { case 'Europe' : return 'label label-primary'; case 'America' : return 'label label-danger label-important'; case 'Australia': return 'label label-success'; case 'Africa' : return 'label label-primary'; case 'Asia' : return 'label label-warning'; } }, itemValue: 'value', itemText: 'text' }); $('input').tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }); $('input').tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" }); $('input').tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" }); $('input').tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" }); $('input').tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" }); // Adding custom typeahead support using http://twitter.github.io/typeahead.js $('input').tagsinput('input').typeahead({ valueKey: 'text', prefetch: '../assets/cities.json', template: '<p>\{\{text\}\}</p>', engine: Hogan }).bind('typeahead:selected', $.proxy(function (obj, datum) { this.tagsinput('add', datum); this.tagsinput('input').typeahead('setQuery', ''); }, $('input'))); </script>
True multi value
True multi value
Use a
<select multiple />
as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing
<option />
elements will automatically be set as tags. This makes it also possible to create tags containing a comma.
<select multiple data-role="tagsinput"> <option value="Amsterdam">Amsterdam</option> <option value="Washington">Washington</option> <option value="Sydney">Sydney</option> <option value="Beijing">Beijing</option> <option value="Cairo">Cairo</option> </select>
Objects as tags
Typeahead
Typeahead
Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js . An example of using this is shown below.<input type="text" value="Amsterdam,Washington" data-role="tagsinput" /> <script> $('input').tagsinput(); // Adding custom typeahead support using http://twitter.github.io/typeahead.js $('input').tagsinput('input').typeahead({ prefetch: 'citynames.json' }).bind('typeahead:selected', $.proxy(function (obj, datum) { this.tagsinput('add', datum.value); this.tagsinput('input').typeahead('setQuery', ''); }, $('input'))); </script>