Input Tags
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Read the Official Bootsrap Tagsinput Demo for a full list of instructions and other options.
Basic Example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
<input type="text" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput">With Typeahead
Provides an auto suggest dropdown selection.
<input id="input2" type="text" class="form-control" value="Amsterdam,Washington">var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '../assets/data/citynames.json',
filter: function(list) {
return $.map(list, function(cityname) {
return { name: cityname }; });
}
}
});
citynames.initialize();
$('#input2').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});Objects as Tags
Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.
<input id="input3" type="text" class="form-control">var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../assets/data/cities.json'
});
cities.initialize();
var elt = $('#input3');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });