老板: 给我做一个可以key进去一个个标签的文本框。
我:给你个 tagsinput 吧
百度上有一些用法,比较零碎。 我这里总结一下 基于bootstrap 的 tagsinput 的使用:
https://github.com/bootstrap-tagsinput/bootstrap-tagsinput
把disk目录复制到你的项目里面,然后引入 js
<script type="text/javascript" src="${ctx}/lib/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
HTML 代码
<div class="row">
<div class="form-group">
<label class="col-sm-2 control-label">关键字</label>
<div class="col-sm-8">
<input class="form-control" name="keywords" id="keywords" />
</div>
</div>
</div>
初始化
<script>
$(function () {
$("#keywords").tagsinput()
})
</script>
如果你想删除或者增加tags,可以查阅一下源码,写得还不错
例如 清空和添加操作
var $keywords = $("#keywords");
$keywords.tagsinput('removeAll'); // 清空
$keywords.tagsinput('add', keywords); // 添加(用逗号隔开)