jquery.tagthis和jquery.autocomplete一起实现标签

实现

<inputname="jobTag"id="jobTag"/>

$(function(){

$('#jobTag').tagThis({noDuplicates:true,defaultText:'输入标签',autocompleteSource:[],callbacks:{beforeAddTag:beforeAddTag}});
vartagList=@Html.Raw(Model.Tags);
$(tagList).each(function(index,element){
$('#jobTag').addTag(element);
});
　　　　
//或者写成

});

noDuplicates：标签不能重复
defaultText：默认是typetotag，这里可以自定义
callbacks：有beforeAddTag、afterAddTag、afterRemoveTag、onChange、beforeRemoveTag、errors，这里本来想在beforeAddTag事件中修改标签的id值，后来发现修改不了
Model.Tags：是在后台获取的一个json格式的字符串，如：vartagList='[{"id":62,"text":"java"},{"id":70,"text":"ORACLE"}]';

3.动态修改下拉的数据源和已经添加的标签

$.ajax({
url:'url',
type:'get',
data:{jobTitle:jobTitle,jobDetail:jobDetail},
success:function(response){
if(response.Success){
//更新自动提示的数据源
$('#jobTag--tag').autocomplete("option","source",response.Result.AllTag);
$('#jobTag').clearAllTags();
$(response.Result.MatchingTag).each(function(index,element){
$('#jobTag').addTag(element);});

}else{
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
show_v_msg(XMLHttpRequest.readyState+XMLHttpRequest.status+XMLHttpRequest.responseText,'error');
}});

#jobTag--tag是从tagthis的源码中分析到，真正的输入框是原有的id+“--tag”。
$('#jobTag--tag').autocomplete("option","source",response.Result.AllTag);修改自动提示框的数据源。
response.Result.AllTag是[{value:62,label:"java"},{value:63,label:"jsp"}]这样的，要符合autocomplete控件的格式
response.Result.MatchingTag是[{id:62,text:"java"},{id:70,text:"ORACLE"}这样的，要符合tagthis标签的格式。

4.修改tagthis的源码，让他支持自定义格式的autocomplete

修改自动完成控件的显示和选中时的数据格式。

//autocompletefunctionality

if(settings.autocompleteSource){

varautocompleteSettings={
source:settings.autocompleteSource,
//zbladd
focus:function(event,ui){
realInputElement.val(ui.item.label);
returnfalse;
},
select:function(event,ui){
event.preventDefault();
//realInputElement.addTag(ui.item.value);
//zbledit
vartagData={
text:ui.item.label,
id:ui.item.value
};
realInputElement.addTag(tagData);
fakeInputElement.focus();
returnfalse;
}
};

$.fn.tagExists=function(settings,data){

//checktoseeifourtagalreadyexistsontheinput
vartags=$(this).data('tags');

//ifnothingcomesbackfrom.data(),there'snotags,soreturnfalse
if(!tags){
returnfalse;
}

//ifit'saninteractiveinput,datacomesbackasastring,sojustcheckthedatavariableitself
//zbledit
//if(settings.interactive||!data.id){改成if(settings.interactive&&!data.id){
if(settings.interactive&&!data.id){

$.fn.tagThis.generateUniqueTagId=function(tags){
varmin=2000;//zbledit
varmax=7000;