jQuery Tags Input 插件输入框回车显示标签

效果

上来先引用文件

<link rel="stylesheet" href="../css/jquery.tagsinput.css">
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.tagsinput.js"></script>

<input id="tags" type="text" class="tags" value="foo,bar,baz,roffle" />

简单初始化

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

你还可以使用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)
    }
});

API

$(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 Tags Input 插件输入框回车显示标签

猜你喜欢