jQuery Tags Input使用教程jquery插件tagsinput
jquery tagsinput这个插件很好用,并且它还支持jQuery.autocomplete自动完成参数传递。
github地址:https://github.com/xoxco/jQuery-Tags-Input
首先需要引入tagsinput:
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
可以设置默认值
<input name="tags" id="tags" value="php,linux,apache" />
然后调用构造函数就能看到效果了:
$('#tags').tagsInput();
自动完成参数传递:
$('#tags').tagsInput({
autocomplete_url:'http://www.xxx.com/api/autocomplete',
autocomplete:{selectFirst:true,width:'auto或者这里还可以写具体宽度比如50px',autoFill:true}
});$('#tags').importTags('php,linux,apache'); //配置标签列表
if ($('#tags').tagExist('php')) { ... }//判断标签是否存在
$('#tags').addTag('php');//添加一个标签
$('#tags').removeTag('php');//移除一个标签详细参数详解：
$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api, //自动完成插件的文件地址
'autocomplete': { option: value, option: value}, //自动完成插件的参数。
'height':'100px', //设置高度
'width':'300px', //设置宽度可以是auto
'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' : '#f00' //设置defaultText的颜色
});
留言(0)