README

![NPM版本][npm-badge] ![构建状态][travis-badge] [npm-badge]: https://badge.fury.io/js/bootstrap-tokenfield.png [travis-badge]: https://travis-ci.org/sliptree/bootstrap-tokenfield.png?branch=master

由 Sliptree 团队开发，为 Twitter's Bootstrap 提供的 jQuery 标签/分词输入插件

查看演示和文档

安装

要求：jQuery 1.9+，Bootstrap 3+（仅CSS）

通过 npm 或 bower 安装（推荐）或手动下载包
在您的 HTML 中包含 dist/bootstrap-tokenfield.js 或 dist/bootstrap-tokenfield.min.js
在您的 HTML 中包含 dist/css/bootstrap-tokenfield.css

使用方法

$('input').tokenfield()

功能

使用 Ctrl+C 和 Ctrl+V 复制粘贴标记
键盘导航，使用键盘删除标记（箭头键，Shift + 箭头键）
使用 Ctrl + 点击和 Shift + 点击选择特定的标记
支持 Twitter Typeahead 和 jQuery UI 自动完成

常见问题解答

如何防止输入重复的标记？

您可以使用 tokenfield:createtoken 事件来实现。检查 event.attrs 属性以获取标记值和标签，然后运行您的重复检测逻辑。如果是重复的标记，只需执行 event.preventDefault()。

以下是一个简单示例，检查标记的值是否等于现有标记的值。

$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
	var existingTokens = $(this).tokenfield('getTokens');
	$.each(existingTokens, function(index, token) {
		if (token.value === event.attrs.value)
			event.preventDefault();
	});
});

那么，如何限制标记数量到我的 typeahead/autocomplete 数据中？

同样，使用 tokenfield:createtoken，您可以检查标记是否存在于您的 autocomplete/typeahead 数据中。此示例检查给定标记是否已存在，如果不存在则阻止其输入。

$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
	var available_tokens = bloodhound_tokens.index.datums
	var exists = true;
	$.each(available_tokens, function(index, token) {
		if (token.value === event.attrs.value)
			exists = false;
	});
	if(exists === true)
		event.preventDefault();
})

更新日志

查看发布说明

之前的版本

0.10.0

修复：输入重复的标记不再提交底层表单
修复：从自动完成或类型提示建议中选择重复的标记不再清除输入
改进：尝试输入重复标签现在会对现有标签进行动画处理一段时间
改进：Tokenfield 输入现在具有 autocomplete="off" 以防止浏览器特定的自动完成建议
更改：triggerKeys 已重命名为 delimiter 并接受单个或字符数组，而不是字符代码。

0.9.9-1

修复：setTokens 现在尊重 triggerKeys 选项

0.9.8

新增：triggerKeys 选项
修复：初始化 tokenfield 时不带标记时，长占位符不再被截断 #37
修复：createTokensOnBlur 不会中断标记编辑 #35

0.9.7 价值

修复：支持 Twitter Typeahead valueKey #18
修复：删除多个标记返回错误数据 #30
修复：在 beforeEdit 事件中删除标记后不再崩溃 #27, #28
修复：初始化时触发 change 事件 #22
修复：在 tokenfield:preparetoken 事件中删除标记时不再尝试创建标记
修复：按逗号键不可靠地处理
新增：prevetDuplicateToken 事件
改进：Typeahead 集成
改进：样式
小调整、修复和改进

0.9.5 可键入

新增：支持 Twitter Typeahead
新增：在原始输入上触发 'change' 事件时，现在会调用 setTokens。这允许您外部更新标记。
修复：输入标签与 tokenfield 不兼容
修复：为固定宽度输入设置正确的输入宽度

0.9.2 维护版本

许多小修复和改进

0.9.0 可引导版本

新增：支持 Bootstrap 3
新增：支持输入组
新增：禁用/启用 tokenfield
新增：tokenfield 现在是响应式的
弃用：Bootstrap 2 支持

0.7.1

修复：在 Firefox 中按下逗号不会创建标记
修复：tokenfield('getTokensList') 返回数组而不是字符串

0.7.0 自动完成功能

新增功能：支持 jQuery UI 自动完成

0.6.7 可交换功能

修复：Firefox 的关闭图标位置不正确
新增：支持 IE 8-10（CSS 和 JavaScript）

0.6.5 可移动功能

新增功能：使用 Ctrl/Shift + 点击选择特定的标记
新增功能：使用 Shift + 方向键选择特定的标记
内部 API 改进

0.6 可编辑功能

新增功能：通过双击或按回车键编辑现有标记
许多改进和错误修复

0.5 初次发布

ingenious / bootstrap-tokenfield

维护者

详细信息