Amaze UI Plugin

Amaze UI Tags Input

Amaze UI 风格的 jQuery 标签输入插件。

Star Fork Download

使用演示


调用方式

使用 input

input 上添加 data-role="tagsinput" 属性,自动初始化为标签输入框。

<input id="tags-1" type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

获取 input 的值:

$('#tags-1').val()
// "Amsterdam,Washington,Sydney,Beijing,Cairo"

$('#tags-2').tagsinput('items')
// ["Amsterdam", "Washington", "Sydney", "Beijing", "Cairo"]

使用 select

<select id="tags-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>

获取的值时都返回数组:

$('#tags-select').val();
// ["Amsterdam","Washington","Sydney","Beijing","Cairo"]

$('#tags-select').tagsinput('items');
// ["Amsterdam","Washington","Sydney","Beijing","Cairo"]

在表单中使用

<style>
  .am-form .am-tagsinput {
    min-width: 100%;
  }
</style>
<div class="am-g">
  <div class="am-u-md-8 am-u-md-centered">
    <form class="am-form" action="" method="post">
      <div class="am-form-group">
        <label for="tags-10">输入标签:</label>
        <input id="tags-10" type="text" value="" data-role="tagsinput"/>
      </div>
      <div class="am-align-right">
        <input type="submit" class="am-btn am-btn-primary" value="submit"/>
      </div>
    </form>
  </div>
</div>

输入提示

结合 typeahead.js 使用可以实现输入提示效果

<input id="input-sg" type="text" value="Amsterdam,Washington" data-role="tagsinput" />
var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: 'js/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; });
    }
  }
});
citynames.initialize();

$('#input-sg').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

对象作为标签

标签需要存储更多数据时,可以在标签上存储对象。

var cities = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'assets/cities.json'
});
cities.initialize();

var $elt = $('#obj-as-tags');
$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"    });

获取值:

$('#obj-as-tags').val();
// "1,4,7,10,13"

$('#obj-as-tags').tagsinput('items');
// [{"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"}]

设置标签 class

// tag color
var cities = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'js/cities.json'
});
cities.initialize();

var $tc = $('#tag-color');
$tc.tagsinput({
  tagClass: function(item) {
    switch (item.continent) {
      case 'Europe'   : return 'am-badge am-badge-primary';
      case 'America'  : return 'am-badge am-badge-danger';
      case 'Australia': return 'am-badge am-badge-success';
      case 'Africa'   : return 'am-badge';
      case 'Asia'     : return 'am-badge am-badge-warning';
    }
  },
  itemValue: 'value',
  itemText: 'text',
  typeaheadjs: {
    name: 'cities',
    displayKey: 'text',
    source: cities.ttAdapter()
  }
});
$tc.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
$tc.tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
$tc.tagsinput('add', { "value": 7 , "text": "Sydney"      , "continent": "Australia" });
$tc.tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"      });
$tc.tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
Amaze UI 微信
在微信上关注我们