tagsinput 标签输入神器

老板： 给我做一个可以key进去一个个标签的文本框。
我：给你个 tagsinput 吧

image.png

百度上有一些用法，比较零碎。 我这里总结一下 基于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，可以查阅一下源码，写得还不错

image.png

例如 清空和添加操作

var $keywords = $("#keywords");
$keywords.tagsinput('removeAll');   // 清空
 $keywords.tagsinput('add', keywords);  // 添加（用逗号隔开）