Boostrap Tags input 的使用：http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
Boostrap Tags Input 插件基于Bootstrap实现了如：打Tag 和 删除Tag等功能，如：
点击右侧的 x 号可以进行删除。可以通过 tagsinput('items') 方法获取定义的tag的内容。如：
console.log($('#input').val());
console.log($('#input').tagsinput('items'));
但仅是这样并不能满足自身的需求，于是对结合自身需求，进行了修改实现：当点击 “输入框” 时，将出现一个 Modal（模态框），用于定义tag的内容，当输入内容后，点击确定，即可生成具有相应信息的tag。同样点击右侧的 x 号可以删除当前 tag 。再次点击 tag 可以对 tag 进行再次编辑。效果如下：
点击“显示信息”可以查看一个 tag 保存的信息：
再次点击 tag 进行编辑：
具体实现如下：（主要需要先引入 bootstrap 框架 和 boostrap tags input 插件）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tags Input</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-tagsinput/bootstrap-tagsinput.css">
<style>
.bootstrap-tagsinput {
display: block;
}
.bootstrap-tagsinput .tag {
display: inline-block;
margin: 0.4em 0;
font-size: 1.1em;
}
</style>
</head>
<body>
<div class="container" style="margin: 50px auto;">
<p><input type="text" id="input"/></p>
<p><button class="btn btn-default" id="showInfo">显示信息</button></p>
<div id="info" style="margin: 10px 0;"></div>
</div>
<div id="modal-add" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="tname" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="tname" placeholder="请输入名称">
</div>
</div>
<div class="form-group">
<label for="tcontent" class="col-sm-2 control-label">内容</label>
<div class="col-sm-10">
<textarea id="tcontent" rows="5" class="form-control" placeholder="请输入内容"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btn-add">确定</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="modal-change" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="tname" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="tname" placeholder="请输入名称">
</div>
</div>
<div class="form-group">
<label for="tcontent" class="col-sm-2 control-label">内容</label>
<div class="col-sm-10">
<textarea id="tcontent" rows="5" class="form-control" placeholder="请输入内容"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btn-change">确定</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script>
$(function() {
var tagsinput = $('#input').tagsinput({
trimValue: true,
itemValue: function(item) {
return item.title;
},
tagClass: function(item) {
var type = 'label-default';
switch (parseInt(Math.random() * 6)) {
case 0:
type = 'label-default'; break;
case 1:
type = 'label-primary'; break;
case 2:
type = 'label-success'; break;
case 3:
type = 'label-info'; break;
case 4:
type = 'label-warning'; break;
case 5:
type = 'label-danger'; break;
}
return 'label ' + type;
}
})[0];
var input = tagsinput.$element;
var tagsArray = tagsinput.itemsArray;
var tagsContainer = tagsinput.$container; // tag 的容器
var modalAdd = $('#modal-add'); //添加 tag 时，显示的模态框
var modalChange = $('#modal-change'); //修改 tag 时，显示的模态框
// 点击tagsinput输入框，显示模态框
tagsContainer.on('click', function() {
$(this).find('input').blur();
// 清除原来的内容，打开用于 增加tag的模态框
modalAdd.find('input').val('');
modalAdd.find('textarea').val('');
modalAdd.modal('show');
});
// 添加tag的模态框的确认按钮
$('#btn-add').on('click', function() {
var minput = modalAdd.find('input').val();
var mtextarea = modalAdd.find('textarea').val();
if(minput == '' || mtextarea =='') {
return false;
}
input.tagsinput('add', {'title' : minput, 'text' : mtextarea});
modalAdd.modal('hide');
// 当前新创建的标签
var cur = $(tagsContainer.children('span.tag:last'));
cur.on('click', function(e) {
e.stopPropagation();
tagsContainer.find('input').blur();
// 显示模态框
var item = $(this).data('item');
var title = item.title;
var text = item.text;
modalChange.data('tag', $(this));
modalChange.find('input').val(title);
modalChange.find('textarea').val(text);
modalChange.modal('show');
});
// 当前新建的标签的删除事件
cur.children('span[data-role=remove]').on('click', function(e) {
e.stopPropagation();
if (tagsinput.$element.attr('disabled')) {
return;
}
tagsinput.remove($(e.target).closest('.tag').data('item'));
});
});
$('#btn-change').on('click', function() {
var title = modalChange.find('input').val();
var text = modalChange.find('textarea').val();
// 当前正在编辑的 tag
var tag = modalChange.data('tag');
var beforeTitle = tag.data('item').title;
tag.data('item', {title: title, text: text});
// 修改 tagsArray 中保存的内容
for(var i = 0; i < tagsArray.length; i++) {
if(tagsArray[i].title == beforeTitle) {
tagsArray[i].title = title;
tagsArray[i].text = text;
}
}
input.tagsinput('pushVal');
input.tagsinput('refresh'); //“刷新界面”
modalChange.modal('hide');
});
$('#showInfo').on('click', function() {
$('#info').html('<pre>' + $('#input').val() + '<br/>' + $('#input').tagsinput('items') + '</pre>');
console.log($('#input').val());
console.log($('#input').tagsinput('items'));
});
});
</script>
</body>
</html>