# jQuery Tags Input Plugin
Do you use tags to organize content on your site?
This plugin will turn your boring tag list into a
magical input that turns each tag into a style-able
object with its own delete link. The plugin handles
all the data - your form just sees a comma-delimited
list of tags!
[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)
[View Demo](http://xoxco.com/projects/code/tagsinput/)
[Test it yourself using this jsFiddle Demo](http://jsfiddle.net/7aDak/)
Created by [XOXCO](http://xoxco.com)
## Instructions
First, add the Javascript and CSS files to your <head> tag:
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
Create a real input in your form that will contain a comma-separated list of
tags. You can put any default or existing tags in the value attribute, and
they'll be handled properly.
<input name="tags" id="tags" value="foo,bar,baz" />
Then, simply call the tagsInput function on any field that should be treated as
a list of tags.
$('#tags').tagsInput();
If you want to use jQuery.autocomplete, you can pass in a parameter with the
autocomplete url.
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});
If you're using the bassistance jQuery.autocomplete, which takes extra
parameters, you can also send in options to the autocomplete plugin, as
described here.
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete',
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});
You can add and remove tags by calling the addTag() and removeTag() functions.
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
You can import a list of tags using the importTags() function...
$('#tags').importTags('foo,bar,baz');
You can also use importTags() to reset the tag list...
$('#tags').importTags('');
And you can check if a tag exists using tagExist()...
if ($('#tags').tagExist('foo')) { ... }
If additional functionality is required when a tag is added or removed, you may
specify callback functions via the onAddTag and onRemoveTag parameters. Both
functions should accept a single tag as the parameter.
If you do not want to provide a way to add tags, or you would prefer to provide
an alternate interface for adding tags to the box, you may pass an false into
the optional 'interactive' parameter. The tags will still be rendered as per
usual, and the addTag and removeTag functions will operate as expected.
If you want a function to be called every time a tag is updated/deleted, set it
as the 'onChange' option.
By default, if the cursor is immediately after a tag, hitting backspace will
delete that tag. If you want to override this, set the 'removeWithBackspace'
option to false.
## Options
$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api,
'autocomplete': { option: value, option: value},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
'onAddTag':callback_function,
'onRemoveTag':callback_function,
'onChange' : callback_function,
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0 //if not provided there is no limit,
'placeholderColor' : '#666666'
});
jQuery添加/删除标签插件jQuery Tags Input Plugin
需积分: 32 88 浏览量
2014-05-14
14:12:32
上传
评论
收藏 107KB ZIP 举报
jquery插件库-jq22com
- 粉丝: 14
- 资源: 301
最新资源
- 基于yolov5识别算法实现的DNF自动脚本源码.zip
- 基于Python实现的自动化办公项目.zip
- 基于python实现的基于PyQt5和爬虫的小说阅读系统.zip
- 机械设计整经机上纱自动化sw20非常好的设计图纸100%好用.zip
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序,冒泡排序,直接选择排序.zip
- 在排序2的基础上,再次对快排进行优化,其次增加快排非递归,归并排序,归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序(堆排序,归并排序,快速排序)一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈