Tags Input https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Base

Amsterdam Washington Sydney Beijing Cairo
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" class="form-control">
    Copy

True multi value

Amsterdam Washington Sydney Beijing Cairo
<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>
    Copy

Objects as tags

Amsterdam Washington Sydney Beijing Cairo
<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>
    Copy

Categorizing tags

Amsterdam Washington Sydney Beijing Cairo
<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>
    Copy

Colors

Amsterdam Washington Sydney Beijing Cairo

Amsterdam Washington Sydney Beijing Cairo

Amsterdam Washington Sydney Beijing Cairo

Amsterdam Washington Sydney Beijing Cairo

Amsterdam Washington Sydney Beijing Cairo
<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>
    Copy

States

Amsterdam Washington Sydney Beijing Cairo
Amsterdam Washington Sydney Beijing Cairo
Amsterdam Washington Sydney Beijing Cairo
<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>
    Copy

Sizes

Add the .bootstrap-tagsinput-{size} class to the parent container to change input's size.

Amsterdam Washington Sydney Beijing Cairo

Amsterdam Washington Sydney Beijing Cairo
<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>
    Copy

Usage

require(['jquery', 'px/extensions/bootstrap-tagsinput'], function($) {
  ...
});

Usage

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',
    ],
  },
]);

Example




<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>
    Copy
SETTINGS
THEMES