<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control"><select multiple data-role="tagsinput" class="form-control">
<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><input type="text" class="form-control" id="bs-tagsinput-1">
<script>
$(function() {
var $el = $('#bs-tagsinput-1');
$el.tagsinput({
itemValue: 'value',
itemText: 'text',
});
$el.tagsinput('add', { value: 1, text: 'Amsterdam', continent: 'Europe' });
$el.tagsinput('add', { value: 4, text: 'Washington', continent: 'America' });
$el.tagsinput('add', { value: 7, text: 'Sydney', continent: 'Australia' });
$el.tagsinput('add', { value: 10, text: 'Beijing', continent: 'Asia' });
$el.tagsinput('add', { value: 13, text: 'Cairo', continent: 'Africa' });
});
</script><input type="text" class="form-control" id="bs-tagsinput-2">
<script>
$(function() {
var $el = $('#bs-tagsinput-2');
$el.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',
});
$el.tagsinput('add', { value: 1, text: 'Amsterdam', continent: 'Europe' });
$el.tagsinput('add', { value: 4, text: 'Washington', continent: 'America' });
$el.tagsinput('add', { value: 7, text: 'Sydney', continent: 'Australia' });
$el.tagsinput('add', { value: 10, text: 'Beijing', continent: 'Asia' });
$el.tagsinput('add', { value: 13, text: 'Cairo', continent: 'Africa' });
});
</script><input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" class="form-control" id="bs-tagsinput-3">
<br>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" class="form-control" id="bs-tagsinput-4">
<br>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" class="form-control" id="bs-tagsinput-5">
<br>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" class="form-control" id="bs-tagsinput-6">
<br>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" class="form-control" id="bs-tagsinput-7">
<script>
$(function() {
$('#bs-tagsinput-3').tagsinput({ tagClass: 'label label-primary' });
$('#bs-tagsinput-4').tagsinput({ tagClass: 'label label-success' });
$('#bs-tagsinput-5').tagsinput({ tagClass: 'label label-warning' });
$('#bs-tagsinput-6').tagsinput({ tagClass: 'label label-danger' });
$('#bs-tagsinput-7').tagsinput({ tagClass: 'label label-default' });
});
</script><div class="form-group has-error">
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
</div>
<div class="form-group has-warning">
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
</div>
<div class="form-group has-success">
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
</div>
Add the .bootstrap-tagsinput-{size} class to the parent container to change input's size.
<div class="bootstrap-tagsinput-sm">
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
</div>
<br>
<div class="bootstrap-tagsinput-lg">
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
</div>require(['jquery', 'px/extensions/bootstrap-tagsinput'], function($) {
...
});To use ngTagsInput plugin, you need to include the next scripts:
<script src="path/to/js/libs/ng-tags-input.js"></script>Then inject the plugin into your angular application:
angular.module('yourApp', ['ngTagsInput']);Alternatively, you can include ngTagsInput plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'ngTagsInput',
files: [
'path/to/js/libs/ng-tags-input.js',
],
},
]);<div ng-app="ngTagsInputApp" ng-controller="ngTagsInputAppCtrl as ctrl">
<tags-input ng-model="ctrl.selected" tag-class="{'label label-primary': true}" placeholder="Select values">
<auto-complete source="ctrl.autocomplete($query)" min-length="0" max-results-to-show="100"></auto-complete>
</tags-input>
<br>
<tags-input ng-model="ctrl.selected" tag-class="{'label label-success': true}" placeholder="Select values">
<auto-complete source="ctrl.autocomplete($query)" min-length="0" max-results-to-show="100"></auto-complete>
</tags-input>
<hr>
<tags-input ng-model="ctrl.selected" tag-class="{'label': true}" class="tags-input-sm" placeholder="Select values">
<auto-complete source="ctrl.autocomplete($query)" min-length="0" max-results-to-show="100"></auto-complete>
</tags-input>
<br>
<tags-input ng-model="ctrl.selected" tag-class="{'label': true}" class="tags-input-lg" placeholder="Select values">
<auto-complete source="ctrl.autocomplete($query)" min-length="0" max-results-to-show="100"></auto-complete>
</tags-input>
</div>
<!-- Load script -->
<script src="assets/js/angular/libs/ng-tags-input.js"></script>
<script>
angular.module('ngTagsInputApp', ['ngTagsInput'])
.controller('ngTagsInputAppCtrl', function() {
this.data = [
{ text: 'One' },
{ text: 'Two' },
{ text: 'Three' },
{ text: 'Four' },
{ text: 'Five' },
{ text: 'Six' },
{ text: 'Seven' },
{ text: 'Eight' },
{ text: 'Nine' },
];
this.selected = [ this.data[1], this.data[4], this.data[5], this.data[8] ];
this.autocomplete = function($query) {
$query = ($query || '').toLowerCase();
return this.data.reduce(function(result, item) {
return item.text.toLowerCase().indexOf($query) !== -1 ? result.concat([item]) : result;
}, []);
};
});
</script>