一個jquery開發的標簽功能加強插件，可以生成或刪除標簽，還能對輸入重復標簽進行檢查，和JQuery autocomplete插件配合實現自動完成功能。
官網：http://xoxco.com/projects/code/tagsinput/
引入
<link href="../../resources/css/jquery.tagsinput.css" rel="stylesheet" type="text/css" /> 一般引入<script type="text/javascript" src="../../resources/js/jquery.mytagsinput.js"></script>
此處我做了些更改，文件地址在文章末尾。
JavaScript
<script type="text/javascript">
/***
* @Author sonet
* 如需更改Tags配置，請到jquery.tagsinput.js中更改
**/
//add tags
function onAddTag(tag) {
$.mpbAlert({
//mpbAlert此處為自己的工具類，可更換為自己的彈出層
content:"確定添加"+tag,
icon:"question",
ok : function(){
//add tags
$.mpbAjax(
"/admin/job/addJobTypes",
{
data:{
_method:"PUT",
tagName:tag
},
async:false,
success:function(data){
LoadData();
location.reload();
}
}
);
//end add tags
},
cancel : function(){
$("#tags").removeTag(tag);
}
});
}
//remove tags
function onRemoveTag(tag) {
$.mpbAlert({
content:"確定刪除"+tag,
icon:"question",
ok : function(){
//delete tags
$.mpbAjax(
"/admin/job/removeJobTypes",
{
data:{
_method:"DELETE",
tagName:tag
},
async:false,
success:function(data){
LoadData();
}
}
);
//delete add tags
},
cancel : function(){
$("#tags").addTag(tag);
}
});
}
//change tags
function onChangeTag(input,tag) {
alert("Changed a tag: " + tag);
}
//tags controller
$(function() {
LoadData();
$("span .tag").click(function(){
alert("adsdad");
});
$("#tags").tagsInput({
width:'auto',
onAddTag:function(tag){
onAddTag(tag);
},
onRemoveTag:function(tag){
onRemoveTag(tag);
}
//,
// interactive:false //禁止增加標簽
});
});
function LoadData(){
$.mpbAjax(
"/admin/job/getAllJobTypes",
{
data:{
_method:"GET"
},
async:false,
success:function(data){//拼字符串用於tag的顯示
var strs="";
for(var i in data){
strs+=data[i].name+",";
}
strs=strs.substring(0,strs.length-1);
$("#tags").attr("value",strs);
}
}
);
}
//edit tags
function editTags(value){
$.mpbAlert({
content:"確定修改為<input type=\"text\" id=\"editTags\" value=\""+value+"\">",
icon:"",
ok : function(){
var newTag = $("#editTags").val();
$.mpbAjax(
"/admin/job/updateJobTypes",
{
data:{
_method:"POST",
oldTag:value,
newTag:newTag
},
async:false,
success:function(data){
location.reload();
}
}
);
},
cancel : function(){
}
});
}
function addNewTag(){
var str = $("#addNewTag").val();
if($.isNotBlank(str)){
onAddTag(str);
}
}
</script>
xx.html>body
從后台取出來的值會通過js處理拼成以","分割的字符串賦值到id為tags的input標簽的value屬性中。
例如：a,b,c
<body> 請輸入一個職位類別:<input type="text" id="addNewTag" value=""/><input type="submit" onclick="addNewTag();" value="添加" /> <form> <p><label>職位類別管理:</label></p> <input id="tags" type="text" class="tags" value="a,b,c" /> </form> </body>
// 配置區 $.fn.tagsInput = function(options) { var settings = jQuery.extend({ interactive:true, //交互式 defaultText:'添加一個類別', //提示語 minChars:0, width:'100px', //編輯區寬度 height:'300px', //編輯區高度 autocomplete: {selectFirst: false }, 'hide':true, 'delimiter':',', //分隔符 'unique':true, //獨一性 removeWithBackspace:true, placeholderColor:'#666666', autosize: true, comfortZone: 20, inputPadding: 6*2 },options);
//html頁面的Input 框中的value會通過下面的代碼分割
$.fn.tagsInput.importTags = function(obj,val) { $(obj).val(''); var id = $(obj).attr('id'); var tags = val.split(delimiter[id]); for (i=0; i<tags.length; i++) { $(obj).addTag(tags[i],{focus:false,callback:false}); } if(tags_callbacks[id] && tags_callbacks[id]['onChange']) { var f = tags_callbacks[id]['onChange']; f.call(obj, obj, tags[i]); } };
分割后的字符依次調用addTag方法將值添加到域中
//add tags $.fn.addTag = function(value,options) { options = jQuery.extend({focus:false,callback:true},options); this.each(function() { var id = $(this).attr('id'); var tagslist = $(this).val().split(delimiter[id]); if (tagslist[0] == '') { tagslist = new Array(); } value = jQuery.trim(value); if (options.unique) { var skipTag = $(this).tagExist(value); if(skipTag == true) { //Marks fake input as not_valid to let styling it $('#'+id+'_tag').addClass('not_valid'); } } else { var skipTag = false; } if (value !='' && skipTag != true) { $('<span>').addClass('tag').append( $('<span>').text(value).append(' '), $('<a>', { href : '#', title : 'Removing tag', text : 'x' }).click(function () { return $('#' + id).removeTag(escape(value)); }) ).click(function(){//add edit funciton editTags(value);//調用外部函數通過彈出層形式進行更改 }).insertBefore('#' + id + '_addTag'); tagslist.push(value); $('#'+id+'_tag').val(''); if (options.focus) { $('#'+id+'_tag').focus(); } else { $('#'+id+'_tag').blur(); } $.fn.tagsInput.updateTagsField(this,tagslist); if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) { var f = tags_callbacks[id]['onAddTag']; f.call(this, value); } if(tags_callbacks[id] && tags_callbacks[id]['onChange']) { var i = tagslist.length; var f = tags_callbacks[id]['onChange']; f.call(this, $(this), tagslist[i-1]); } } }); return false; }; //end add tags