@extends('admin/layouts/default') {{-- Page title --}} @section('title') Tags Input @parent @stop {{-- page level styles --}} @section('header_styles') @stop {{-- Page content --}} @section('content')

Tags Input

  1. Dashboard
  2. UI features
  3. Tags Input

Markup

Markup

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

Show code 
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

Categorizing tags

Categorizing tags

You can set a fixed css class for your tags, or determine dynamically by provinding a custom function.

Show code 
<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-primary';
                    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: '../assets/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>

True multi value

True multi value

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.

Show code 
<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>

Objects as tags

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.

Show code 
<input type="text" />
<script>
$('input').tagsinput({
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"    });

$('input').tagsinput('input').typeahead({
valueKey: 'text',
prefetch: 'assets/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>

Typeahead

Typeahead

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js . An example of using this is shown below.
Show code 
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
$('input').tagsinput();

// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {
this.tagsinput('add', datum.value);
this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));
</script>
@stop {{-- page level scripts --}} @section('footer_scripts') @stop