【NSBD】——Jquery tagsinput标签

【项目需求】

选择任务处置下发人员——点击选择按钮，弹出组织机构树对话框——搜索符合条件的人员或部门，增加单个或多个——点击保存按钮——选择的人员显示到对应的文本框中（以逗号隔开）。
 

【修改内容】

将文本框中显示的人员以逗号隔开，换成标签的形式，就像我们写博客选择的标签一样。
 

【代码实现】

 
此功能由jquery的tagsinput插件完成。
 
首先，引入jquery.tagsinput.js和jquery.tagsinput.css两个文件。
 
其次，编写HTML中的body部分，两个input框，一个button按钮
<input id="tags_1"type="text" class="tags" value="111,222,333"
/>
<inputid="tags_2" type="text" class="tags"value="" />
<buttonid ="btn" onclick="add()">添加</button>
其中，第一个文本框中的数据，相当于选择好的人员，而第二个文本框就相当于要显示的文本框。添加就相当于保存按钮。
 
然后，编写add事件和调用tagsInput方法。（这个方法在jquery.tagsinput.js中）
 
//批量添加
functionadd(){
$("#tags_1").val('');
vartexts = $("#tags_2").val();
vartags = texts.split(',');
for(i=0; i<tags.length; i++) {
$("#tags_1").addTag(tags[i],{focus:false,callback:false});
}
}
 
$(function(){
$('#tags_1').tagsInput({width:'auto'});//这样做的目的是，使tags_1能够变成标签。
});
 

【演示效果】

【总结】

        要不是项目有这个需求，自己还不知道这个东西怎么做呢，其实我也没有写几句代码，基本上都是人家写好封装好的，挺简单的。
       这段时间里，项目的代码都不能拷出来，总结技术知识，也是在回家后自己查查资料，写个小例子总结一下，同时查文档的速度也快了很多呀！