jQuery Tags Input Plugin（添加/删除标签插件）详解

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

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

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

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

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

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

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

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

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

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

$('#tags_1').tagsInput({
 width:'auto',
 onRemoveTag:function(tag){
  console.log('remover'+'"'+tag+'"')
 },
 interactive: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的颜色
});