Bootstrap Tags Input是一个jQuery插件，允许您使用Twitter Bootstrap用户界面添加、删除和分类标签。

新Bootstrap 4版本现已上市。

参见：

• 通用jQuery标签输入插件-标签处理程序
• jQuery标签管理器与TwitterBootstrap-标签管理器
• jQuery标记和令牌输入插件用于引导-引导令牌字段

基本用法：

1.在网页上包括jQuery库和jQuery引导标签输入

<script src="assets/jquery.min.js"></script> 
<script src="assets/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="assets/bootstrap-tagsinput.css">

2.在网页上包含Twitter引导程序

<link rel="stylesheet" href="assets/bootstrap-2.3.2/css/bootstrap.min.css">
<script src="assets/bootstrap-2.3.2/js/bootstrap.min.js"></script> 

3.为标签管理器创建一个输入字段

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

4.完成。您可以通过JS选项对象将选项传递给插件。

tagClass: function(item) {
  return 'label label-info';
},
focusClass: 'focus',
itemValue: function(item) {
  return item ? item.toString() : item;
},
itemText: function(item) {
  return this.itemValue(item);
},
itemTitle: function(item) {
  return null;
},
freeInput: true,
addOnBlur: true,
maxTags: undefined,
maxChars: undefined,
confirmKeys: [13, 44],
delimiter: ',',
delimiterRegex: null,
cancelConfirmKeysOnEmpty: false,
onTagExists: function(item, $tag) {
  $tag.hide().fadeIn();
},
trimValue: false,
allowDuplicates: false,
triggerChange: true

更新日志：

版本0.8.0（2022-04-11）

• 新版本

v0.7.1（2015年11月11日）

• allowDuplicates不工作
• 打字输入失去焦点时会出现标记文本
• 删除手册中的重复方法removeAll

v0.7.0（2015年11月09日）

• 默认情况下，.tt菜单等样式应包含在bootstrap-tagsinput.css中
• 当用作分隔符时，逗号会转移到新的标记输入
• 多选中的电子邮件正在被复制
• 加载页面时运行的“itemAdded”事件！

v0.6.1（2015年11月03日）

• 更新uglify以修复源地图生成问题

v0.5.1（2015年3月26日）

• 使现代化

版本0.4.2（2014-08-01）

• 修复使用Bootstrap 3时的预编

版本0.3.14（2014-07-31）

• 将itemKey重命名为valueKey

版本0.3.14（2014-07-27）

• 错误已修复。

版本0.3.10（2014-07-17）

• 使现代化

版本0.3.9（2013-10-15）

• 修正了输入第二个字符时提前键入停止的问题

版本0.3.8（2013-10-15）

• 添加对占位符的支持
• ie 8兼容性，替换indexOf方法

版本0.3.7（2013-10-15）

• 固定：输入重复时闪烁

版本0.3.6（2013-10-06）

• 使用字符串作为标记时，仅将现有值作为标记添加
• 已实现confirmKeys选项

预览截图

jQuery和Bootstrap 漂亮标签管理器 Bootstrap标签输入