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" />
statement | returns |
---|---|
$("input").val() |
|
$("input").tagsinput('items') |
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>
statement | returns |
---|---|
$("select").val() |
|
$("select").tagsinput('items') |
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" /> <script> $('input').tagsinput({ source: function(query) { return $.getJSON('citynames.json'); } }); </script>
statement | returns |
---|---|
$("input").val() |
|
$("input").tagsinput('items') |
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-info'; case 'America' : return 'label label-important'; case 'Australia': return 'label label-success'; case 'Africa' : return 'badge badge-inverse'; case 'Asia' : return 'badge badge-warning'; } }, itemValue: 'value', itemText: 'text', source: function(query) { return $.getJSON('cities.json'); } }); $('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" }); </script>
statement | returns |
---|---|
$("input").val() |
|
$("input").tagsinput('items') |
Include bootstrap-tagsinput-angular.js
and register the 'bootstrap-tagsinput' in your Angular JS application to use the bootstrap-tagsinput directive.
<bootstrap-tagsinput ng-model="cities" source="queryCities" tagclass="getTagClass" itemvalue="value" itemtext="text"> </bootstrap-tagsinput> <script> angular.module('AngularExample', ['bootstrap.tagsinput']) .controller('CityTagsInputController', function CityTagsInputController($scope) { // Init with some cities $scope.cities = [ { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }, { "value": 4 , "text": "Washington" , "continent": "America" }, { "value": 7 , "text": "Sydney" , "continent": "Australia" }, { "value": 10, "text": "Beijing" , "continent": "Asia" }, { "value": 13, "text": "Cairo" , "continent": "Africa" } ]; $scope.queryCities = function(query) { return $http.get('cities.json'); }; $scope.getTagClass = function(city) { switch (city.continent) { case 'Europe' : return 'badge badge-info'; case 'America' : return 'label label-important'; case 'Australia': return 'badge badge-success'; case 'Africa' : return 'label label-inverse'; case 'Asia' : return 'badge badge-warning'; } }; } ); </script>
statement | returns |
---|---|
$scope.cities |
{{cities}} |
$("select").val() |
|
$("select").tagsinput('items') |
option | description |
---|---|
tagClass |
Classname for the tags, or a function returning a classname $('input').tagsinput({ tagClass: 'big' }); $('input').tagsinput({ tagClass: function(item) { return (item.length > 10 ? 'big' : 'small'); } }); |
itemValue |
When adding objects as tags, itemValue must be set to the name of the property containing the item's value, or a function returning an item's value. $('input').tagsinput({ itemValue: 'id' }); $('input').tagsinput({ itemValue: function(item) { return item.id; } }); |
itemText |
When adding objects as tags, you can set itemText to the name of the property of item to use for a its tag's text. You may also provide a function which returns an item's value. When this options is not set, the value of $('input').tagsinput({ itemText: 'label' }); $('input').tagsinput({ itemText: function(item) { return item.label; } }); |
source |
An array (or function returning a promise or array), which will be used as source for a typeahead. $('input').tagsinput({ source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] }); $('input').tagsinput({ source: function(query) { return $.get('http://someservice.com'); } }); |