jQuery Tags Input Plugin(添加/删除标签插件)详解

2020-05-29 07:00:15易采站长站整理

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

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

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

截图:

https://www.easck.com/d/file/200529/20200529065602191.jpg

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

首先,引用下面两个文件


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

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


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

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


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

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


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

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