Jquery 令牌生成器插件来选择一个值

2025年5月19日 | 阅读 7 分钟

Tokenizer.js 是一个简单的 jQuery 标签/分词输入插件,它允许你在输入逗号、空格或回车时将文本格式化为标签或分词。

此外,它还具有自动完成功能,可让你在输入时从建议列表中选择标签或分词。

安装和设置

  • 分词器插件需要 jQuery 链接。我们可以使用任何版本的 jQuery,从基础版到最新版。
  • 分词器文件用于选择多个和单个值。

设置分词器文件需要以下步骤。

  • 从以下网站下载分词器文件。点击下载按钮。
  • 在 script 标签中设置分词器文件名的路径。
  • 在 head 标签中设置 CSS 文件名的路径。

如何应用

  1. 在 jQuery JavaScript 库之后插入分词器.js 插件的最小化版本。
  2. 为标签/分词输入创建一个标准的文本框。
  3. 使用默认设置启用插件。
  4. 设置分词器插件的示例样式。
  5. 你可以选择指定自动完成的数据源。如果提供函数,它应该接受两个参数:第一个参数是输入词,第二个参数是要调用的函数,该函数应与要推荐的术语列表一起调用。如果你正在使用 Ajax,在从服务器接收到答案后,用一个数组作为唯一参数来调用此过程。
  6. 利用更多的个性化选项。
  7. 提供了回调功能。
  8. 使用 API 技术。

分词器插件 API

以下 API 用于数据的不同用途及其功能。

1. 获取选定标签的数组

2. 插入新标签

3. 获取最新标签

4. 删除标签

5. 清除输入标签

6. 销毁分词器插件

7. 触发分词器事件中的回调函数

示例

以下是使用 jQuery 选择多个和单个值的各种示例,以演示分词器插件。我们可以逐步查看每个示例来理解分词器插件。

示例 1

以下示例显示了使用 jQuery 选择单个和多个值的分词器插件。默认值可以设置为“true”,使用 allowUnknownTags 选项允许来自源的未知值。

输出

输出显示使用 jQuery 分词器插件的文本框选项标签。

Jquery tokenizer plugin to select a value

示例 2

以下示例显示了使用 jQuery 选择单个和多个值的分词器插件。未知标签不可用或未通过“allowUnknownTags”选项选择。我们可以将其设置为“false”值,以不允许来自源的未知值。

输出

输出显示使用 jQuery 分词器插件的文本框选项标签。

Jquery tokenizer plugin to select a value

示例 3

以下示例显示了使用 jQuery 选择多个和重复值的分词器插件。allowDuplicates 标签用于多次选择相同的值并显示它。我们可以将其设置为“false”值,以不允许来自源的重复值,但这是默认设置。我们可以使用回调函数和 alert 标签来了解分词器支持多个事件。

输出

输出显示使用 jQuery 分词器插件的文本框选项标签。

输出 1

Jquery tokenizer plugin to select a value

输出 2

Jquery tokenizer plugin to select a value

示例 4

以下示例显示了使用 jQuery 选择多个和重复值的分词器插件。分词器使用 api 来获取值。我们可以将 onclick 事件设置为使用 tokenizer_var.tokenizer('get') API 获取选定值。

输出

输出显示使用 jQuery 分词器插件的文本框选项标签。

输出 1

Jquery tokenizer plugin to select a value

输出 2

Jquery tokenizer plugin to select a value

结论

分词器是一个简单易用的框架,用于在狭小空间内选择多个值。它是具有多种功能的下拉列表的高级版本。