jQuery TagsInput Plugin(添加/删除标签插件)

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

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

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

截图:

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

首先,引用下面两个文件

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

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

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

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

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

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

$('#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 uiautocomplete,如果你想要测试jquery.autocomplete,要把头部被注释掉的引用文件去掉注释,并将$('#tags').tagsInput({})中autocomplete_url的地址改为相应的jquery.autocomplete的文件。具体看页面上有说明。

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

$('#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这两个参数里指定回调函。这两个函数都返回了一个标签值作为参数(原文: Bothfunctions 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 TagsInput相关推荐

  1. jQuery Tags Input Plugin(添加/删除标签插件)

    看名字应该知道是干嘛用了吧. 一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http ...

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

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

  3. html设备监控系统模板,蓝色的远程监控设备系统后台管理界面模板

    资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0729-35/actions.html , 5281 codedown123-0729-35/add.html , 7 ...

  4. iframe 无刷新图片上传图片

    效果图: 使用iframe实现无刷新上传图片首先需要在iframe指定下form,action指定为要提交的地址,注意form表单是不能嵌套的 后台: js: 代码展示: 前端: {% extends ...

  5. oa html5管理系统模板,OA系统html5整站模板 后台模板

    [实例简介] 非常精美的一套html5的OA系统后台模板,包含登录页面.主页面等.其中包含一整套丰富精美的UI控件:表格.表单.进度条.图标.图表.弹出框.按钮组.下拉框.日期选择框.锁屏等等 [实例 ...

  6. 输入控件tagsinput

    ​摘要: ​tagsinput是一款基于jQuery的插件.具有组织输入内容.校验.backspace删除等功能.当你在输入框输入结束按下enter键,tagsinput会将你输入的内容用标签封装,每 ...

  7. html5自定义标签库,Bootstrap tagsinput自定义标签插件

    tagsinput是一款基于Bootstrap的自定义标签插件.该自定义标签插件提供api接口,可以将input和select元素转换为标签.并能和typehead.js插件结合,提供查询提示信息. ...

  8. Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常

    我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...

  9. Jquery DIV滚动至浏览器顶部后固定不动代码

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...

  10. jquery.raty评星插件

    <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...

最新文章

  1. 持续集成之戏说Check-in Dance
  2. linux之find
  3. BS-XX-026 基于SpringBoot 实现个人理财系统
  4. oracle参数文件的本质
  5. 【自动驾驶】定位方式:RTK定位与激光融合定位
  6. 送外卖也要“黑科技”?阿里移动感知技术应用揭秘
  7. 【ArcGIS遇上Python】ArcGIS Python中文编码问题案例详解
  8. 达摩院python教程视频_Python400集大型视频,无偿分享,从正确方向学习python,全套python入门完整视频...
  9. Redefining the shading languages ecosystem with SPIR-V
  10. 刚刚,贺建奎回应一切:如果是我孩子,我会第一个去试验
  11. element-ui ele-calendar 清除选中 事件
  12. 电脑恶意软件删除方法
  13. python属于计算机几级,Python语言被列入全国计算机等级考试科目
  14. onreadystatechange 事件
  15. 计算机台式硬件排名价格,2015年最新台式计算机处理器(CPU)性能排名_计算机硬件和网络_IT /计算机...
  16. 面试积累——嵌入式软件工程师面试题(非常经典)
  17. 【自动驾驶】Frenet坐标系与Cartesian坐标系(一)
  18. iphone8验证服务器出错,某平台上买的“全新国行正品iphone8手机,支持官方验证”用了不到两个月坏了...
  19. SpringBoot @Vaild注解拦截不生效
  20. Jacobi迭代法的matlab程序(《数值分析原理》)

热门文章

  1. 【新书速递】Unity AR/VR 开发必知必会
  2. java实现12306查票_java爬取12306查询余票的操作
  3. 使用Teamviewer实现远程控制安卓设备的实现过程记录
  4. C#利用JScript自动计算字符串公式方法
  5. LIBS+=到底如何用!
  6. 申宝证券-A股三大指数集体高开
  7. 一款开源免费的网站监控系统
  8. ABO区块链在医疗行业中的重要作用
  9. el-collapse用法
  10. PhysX3.4文档(4) --Rigid Body Overview