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 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
微信小程序上传图片实例
May 28 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
JavaScript实现世界各地时间显示
Sep 07 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
Java中final关键字详解
2015/08/10 PHP
深入php内核之php in array
2015/11/10 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
php简单压缩css样式示例
2016/09/22 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript英文日期(有时间)选择器
2007/05/02 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
常用的js方法合集
2017/03/10 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
浅谈python对象数据的读写权限
2016/09/12 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
自荐信格式简述
2014/01/25 职场文书
给实习单位的感谢信
2014/02/01 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
离婚协议书格式
2015/01/26 职场文书
企业培训简报范文
2015/07/20 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers