看名字应该知道是干嘛用了吧。

一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能。

官网:http://xoxco.com/projects/code/tagsinput/

截图:

(下面是翻译了官网上的用法,英文不是很好,有能力的尽量看官网吧)

首先,引用下面两个文件

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

在你的表单里创建一个包含tags列表的input输入框,你可以在value里设置默认或目前有的tags,并用逗号隔开。

<input name="tags" id="tags" value="foo,bar,baz" />

然后,简单地给任何一个输入标签调用tagsInput()函数,它便会被当作一个tags列表处理

$('#tags').tagsInput();

如果你想使用jQuery.autocomalete(自动完成插件)配合使用,那么在函数里增加一个带autocomplete url的参数。

$('#tags').tagsInput({autocomplete_url:'http://myserver.com/api/autocomplete'
});

如果你使用了bassistance.de这个网站上的jQuery.autocomplete插件,还可以增加额外的参数来加强autocomplete插件,就像下面描述的这样。

$('#tags').tagsInput({    autocomplete_url:'http://myserver.com/api/autocomplete',autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

PS:需要注意的是,demo里默认用的是jquery ui autocomplete,如果你想要测试jquery.autocomplete,要把头部被注释掉的引用文件去掉注释,并将$('#tags').tagsInput({})中autocomplete_url的地址改为相应的jquery.autocomplete的文件。具体看页面上有说明。

你还可以使用addTag() and removeTag()函数增加和删除掉标签,如以下:

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

你还可以用imporTags()方法导进一组tag列表,需要注意的是这样会将value里设置的默认tag替换掉

$('#tags').importTags('foo,bar,baz');

所以如果importTags()里不带值的话,就是重置input里的标签值(注意引号要保留,可以理解为给它传空值。)

$('#tags').importTags('');

可以使用tagExist()判断一个标签是否存在:

if ($('#tags').tagExist('foo')) { ... }

如果想要在增加或移除掉标签的时候增加额外的功能或触发其它动作,你可以通过onAddTag和onRemoveTag这两个参数里指定回调函。这两个函数都返回了一个标签值作为参数(原文: Both functions should accept a single tag as the parameter.)

$('#tags_1').tagsInput({width:'auto',onAddTag:function(tag){console.log('增加了'+tag)},onRemoveTag:function(tag){console.log('删除了'+tag)}});

如果你想禁止增加标签,或者你想提供其它交互方式增加标签,可以增加一个值为false的interactive参数,这样就禁止了增加标签,而其它的功能和呈现都跟原来一样。

$('#tags_1').tagsInput({width:'auto',onRemoveTag:function(tag){console.log('remover'+'"'+tag+'"')},interactive:false});

如果你想要在每次增加/删除一个标签的时候调用一个函数,可以增加onChange的参数,并设置回调函数

默认情况下,如果鼠标位于一个标签后面,按退格键会删除掉那个标签。如果你想禁止这个,设置removeWithBackspace参数为false即可。

参数:

$(selector).tagsInput({'autocomplete_url': url_to_autocomplete_api, //自动完成插件的文件地址,demo里有说明'autocomplete': { option: value, option: value}, //自动完成插件的参数,demo有说明。(提供个jquery.autocomplete的:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)'height':'100px', //设置高度'width':'300px',  //设置宽度'interactive':true, //是否允许添加标签,false为阻止'defaultText':'add a tag', //默认文字'onAddTag':callback_function, //增加标签的回调函数'onRemoveTag':callback_function, //删除标签的回调函数'onChange' : callback_function, //改变一个标签时的回调函数'removeWithBackspace' : true, //是否允许使用退格键删除前面的标签,false为阻止'minChars' : 0, //每个标签的小最字符'maxChars' : 0 //每个标签的最大字符,如果不设置或者为0,就是无限大'placeholderColor' : '#666666' //设置defaultText的颜色
});

jQuery Tags Input Plugin(添加/删除标签插件)相关推荐

  1. (转)基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录...

    http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

  2. angular指令:tm.tags添加/删除标签

    一个添加删除标签angular指令: 在网上找了几个标签插件都不是angular的,而且过于庞大,最小的也要30kb还引用了其他样式. 最后实在受不了自己写了,花4个小时找插件,最后自己2小时写完了. ...

  3. vue+element 使用el-tag实现单选多选,动态添加删除标签

    以下是完整代码,仅供参考: <template><div class="tagDialog crmDialog"><el-dialogtitle=&q ...

  4. 使用TagFlowLayout制作动态添加删除标签

    效果图 简单的效果图(使用开源库)[FlowLayout]("https://github.com/hongyangAndroid/FlowLayout") 步骤 导包 compi ...

  5. [转载] Motorola——Milestone XT702添加删除桌面图标

    来源:http://www.hiapk.com/bbs/thread-959-1-1.html 添加桌面图标: 进入菜单界面找到想要建立桌面快捷方式的程序,按住图标不放,感到一下震动了没有,之后把图标 ...

  6. [PHP] JQuery+Layer实现添加删除自定义标签代码

    JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...

  7. jq增加删除html标签,jQuery添加\删除元素

    jQuery添加\删除元素 html> jquery添加和删除元素 $(function(){ //添加元素 //元素内部添加 //append()在被选元素的结尾插入内容; // $('but ...

  8. jQuery实现添加删除

    用jQuery实现添加删除 用原生js实现的代码:https://blog.csdn.net/m0_53679993/article/details/124179917?spm=1001.2014.3 ...

  9. 织梦php开发tags功能开发,DedeCms织梦二次开发批量添加tag标签 批量修改TAG标签功能的方法...

    需求背景: 之前发布了不少文章,后来发现之前的这些文章当时发布时都没有添加tag标签,然而现在需要都添加上tag标签,然而这个在默认的织梦后台是没办法批量实现的,只能一篇篇文章去修改. 思考: 织梦原 ...

最新文章

  1. Linux 网络管理(1) - 网络配置文件
  2. zabbix3.2自动发现批量监控redis端口状态
  3. golang微信公众号请求获取信息
  4. python 系统当前时间向前推2天_python 练习 后台返回当前时间
  5. Swagger 入门使用
  6. ST17H26读ID卡调试过程
  7. 产品经理十八章:产品创新能力(二)
  8. 手机的小窗口怎么弄_荣耀9X如何设置桌面小工具?划重点,这个要考
  9. 179. 最大数 golang (自定义sort)
  10. 【转】应用架构之道:分离业务逻辑和技术细节
  11. python的魔法_python魔法方法大全
  12. (35)FPGA面试技能提升篇(AD、DA、时钟芯片)
  13. Forrester报告:人工智能将取代6%的工作岗位
  14. 由一道习题看如何设计浮点数
  15. 被拖欠2个月工资,最后我拿到了6个月《打工人的那些事》
  16. viper4android fx原理,ViPer4android. FX顶级音效!
  17. GMS认证送测前自检项小结
  18. Onvif再学习---MiniXml-介绍
  19. 全球天气网(tianqi.com)天气预报调用插件
  20. Effective Java 第三版读书笔记(类和接口)

热门文章

  1. 交换链表的奇数节点和偶数节点
  2. MySQL基础之 存储引擎
  3. node中的流的介绍(Stream)
  4. java08 Set
  5. The 2014 ACM-ICPC Asia Mudanjiang Regional Contest(2014牡丹江区域赛)
  6. [20170420]关于延迟块清除3.txt
  7. Hadoop学习之第七章节:Hive安装配置
  8. 记录一下:使用 python -m SimpleHTTPServer 快速搭建http服务
  9. stat用法:获取文件对应权限的数字
  10. u-boot移植问题记录(一)--U_BOOT_CMD区别