插件 jQuery.tagsinput 中文 API 文档

插件 jQuery.tagsinput 中文 API 文档 https://github.com/xoxco/jquery-Tags-Input

您是否使用标签来整理网站上的内容？这个插件会将你无聊的标签列表变成一个神奇的输入，将每个标签变成一个具有自己删除链接的样式对象。该插件处理所有数据 - 您的表单只是看到以逗号分隔的标记列表！

说明

首先，将 Javascript 和 CSS 文件添加到您的标记中：

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

在表单中创建一个包含以逗号分隔的标记列表的实际输入。您可以在 value 属性中放置任何默认或现有标记，并且可以正确处理它们。

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

然后，只需在任何应被视为标记列表的字段上调用 tagsInput 函数。

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

如果要使用 jQuery.autocomplete，可以使用自动完成 URL 传递参数。

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

如果您正在使用带有额外参数的低音 jQuery.autocomplete，您还可以将选项发送到自动完成插件，如此处所述。

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

您可以通过调用 addTag（）和 removeTag（）函数来添加和删除标记。

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

您可以使用 importTags（）函数导入标签列表。..

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

您还可以使用 importTags（）重置标记列表。..

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

你可以使用 tagExist（）检查标签是否存在。..

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

如果在添加或删除标记时需要其他功能，则可以通过 onAddTag 和 onRemoveTag 参数指定回调函数。两个函数都应该接受单个标记作为参数。

如果您不想提供添加标记的方法，或者您希望提供用于向框中添加标记的备用界面，则可以将 false 传递给可选的“interactive”参数。标签仍将按常规渲染，addTag 和 removeTag 函数将按预期运行。

如果希望每次更新 / 删除标记时都调用函数，请将其设置为“onChange”选项。

默认情况下，如果光标紧跟在标记之后，则按退格键将删除该标记。如果要覆盖它，请将“removeWithBackspace”选项设置为 false。

选项

$(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,
   'delimiter': [',',';'],   // Or a string with a single delimiter. Ex: ';'
   'removeWithBackspace' : true,
   'minChars' : 0,
   'maxChars' : 0, // if not provided there is no limit
   'placeholderColor' : '#666666'
});