jQuery Tags Input Plugin(添加/删除标签插件)详解


Posted in Javascript onJune 20, 2016

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

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

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

截图:

jQuery Tags Input Plugin(添加/删除标签插件)详解

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

首先,引用下面两个文件

<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的颜色
});

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Timing
Apr 21 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
JS中的BOM应用
Feb 02 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
javascript实现随机生成DIV背景色
Jun 20 #Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 #Javascript
JS实现弹出居中的模式窗口示例
Jun 20 #Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 #Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 #Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 #Javascript
JS控制层作圆周运动的方法
Jun 20 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
javascript系统时间设置操作示例
2019/06/17 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python中six模块基础用法
2019/12/08 Python
Python 发送邮件方法总结
2020/08/10 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
农场厂长岗位职责
2013/12/28 职场文书
专项法律服务方案
2014/06/11 职场文书
2014年客房部工作总结
2014/11/22 职场文书
节约用电通知
2015/04/25 职场文书