<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-default';
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: '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>