目的

jquery.tagthis:http://www.dangribbin.co/jquery-tag-this/demo/

使用tagthis控件实现标签的输入提醒功能,每个标签具有id和text两个属性。

实现

1.定义Html输入标签

<input name="jobTag" id="jobTag" />

2.初始化标签

 $(function () {

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

var tagList = '@Html.Raw(Model.Tags)';
$(JSON.parse(tagList)).each(function (index, element) {
$('#jobTag').addTag(element);
});

    });
noDuplicates:标签不能重复
defaultText:默认是type to tag,这里可以自定义
callbacks:有beforeAddTag、afterAddTag、afterRemoveTag、onChange、beforeRemoveTag、errors,这里本来想在beforeAddTag事件中修改标签的id值,后来发现修改不了
Model.Tags:是在后台获取的一个json格式的字符串,如:var tagList = '[{"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

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

                if (settings.autocompleteSource) {

                    var autocompleteSettings = {
source: settings.autocompleteSource,
//zbl add
focus: function (event, ui) {
realInputElement.val(ui.item.label);
return false;
},
select: function( event, ui ) {
event.preventDefault();
//realInputElement.addTag(ui.item.value);
//zbl edit
var tagData = {
text: ui.item.label,
id: ui.item.value
};
realInputElement.addTag(tagData);
fakeInputElement.focus();
return false;
}
};

这里是判断标签是否已经存在,感觉 if(settings.interactive || !data.id) 这里原来就是错的。

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

        //check to see if our tag already exists on the input
var tags = $(this).data('tags'); //if nothing comes back from .data(), there's no tags, so return false
if (!tags){
return false;
} //if it's an interactive input, data comes back as a string, so just check the data variable itself
//zbl edit
// if(settings.interactive || !data.id){ 改成 if(settings.interactive && !data.id){
if(settings.interactive && !data.id){

标签除了可以从下拉框中选择预定义的标签还可以输入自定义标签,默认产生自定义标签的id是从0到7000,这里修改一下从2000开始,便于后台区分哪些是自定义的标签。

    $.fn.tagThis.generateUniqueTagId = function(tags) {
var min = 2000; //zbl edit
var max = 7000;
 

jquery.tagthis和jquery.autocomplete一起实现标签的更多相关文章

  1. JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  2. JQuery 插件之Ajax Autocomplete(ajax自动完成)

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  3. jquery实现同时展示多个tab标签+左右箭头实现来回滚动(美化版增加删除按钮)

    闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...

  4. jquery实现同时展示多个tab标签+左右箭头实现来回滚动

    内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...

  5. jQuery创建、删除和修改html标签

    1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...

  6. 使用jQuery筛选排除元素以修改指定标签的属性

    简单案例: $(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); }); 上述代码,有id且id不为空的td ...

  7. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  8. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  9. 第四十四课:jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

随机推荐

  1. IT传统组织结构及新型扁平化组织

    如今互联网企业正凶猛的改变人们衣食住行的方方面面,衣->淘宝,蘑菇街;食->大众点评,口碑;住->去哪,途牛:行->12306, 多次听到互联网的同行介绍他们就是要“快”,快速 ...

  2. MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能

    返回目录 MVC与MVVM的模型 在MVC实例项目中,为我们提供了简单的增删改查功能,而这种功能的实现与具体的Model很有关系,或者说它与后台数据库的关系过于紧密了,而对于开发人员来说当页面布局修改 ...

  3. Atitti usrQBf1801 翻页控件规范  v2

    Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPa ...

  4. SDN跟网络虚拟化的完美结合

    SDN跟网络虚拟化的完美结合 之前说过,所谓的“SDN最适合的领域是数据中心”的说法,笔者认为更准确的说法应该是SDN最适合的领域是数据中心中的网络虚拟化应用.为什么说SDN 非常适合用在网络虚拟化中 ...

  5. fir.im Weekly - 给女朋友的 iOS 开发教程

    俗话说:技多不压身,功到自然成.本期 fir.im Weekly 收集的热度资源,大部分关于Android.iOS 开发工具和源码,还有一些有关设计的 Tips ,希望对你有帮助. 给女朋友的 iOS ...

  6. css 弹出层-透明层

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Liferay7 BPM门户开发之43: Gradle依赖管理

    进入liferay v7.0,官方推荐使用Gradle进行依赖管理和发布,所以必须知道Gradle的用法,网上资料很多,不赘述 只写依赖管理的分类 一般用外部仓库依赖,也可以用本地文件依赖(依赖本地j ...

  8. Python流程控制语句

    人们常说人生就是一个不断做选择题的过程:有的人没得选,只有一条路能走:有的人好一点,可以二选一:有些能力好或者家境好的人,可以有更多的选择:还有一些人在人生的迷茫期会在原地打转,找不到方向.对于相信有 ...

  9. China Mobile 免流原理

    用户添加包头之类(SSR软件),最后连接上了Server. 这个过程因为修改了数据包(混淆)以及服务器使用移动IP. 服务器得到信息后通过计费系统漏洞137 138端口等再返回给用户. 整个过程最重要 ...

  10. Spring学习总结(三)——Spring实现AOP的多种方式

    AOP(Aspect Oriented Programming)面向切面编程,通过预编译方式和运行期动态代理实现程序功能的横向多模块统一控制的一种技术.AOP是OOP的补充,是Spring框架中的一个 ...