README

如何使用

一个使用 Bootstrap 5（和 4）样式标准的 ES6 原生 select 替代品。

（几乎）无需额外的 CSS！支持创建新标签。

import Tags from "./tags.js";
Tags.init();
// Tags.init(selector, opts);
// You can pass global settings in opts that will apply
// to all Tags instances

默认情况下，仅提供选项可用。如果标签无效，将显示验证错误。

<label for="tags-input" class="form-label">Tags</label>
<select class="form-select" id="tags-input" name="tags[]" multiple>
  <option disabled hidden value="">Choose a tag...</option>
  <option value="1" selected="selected">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>

创建新标签

使用属性 data-allow-new 允许创建新标签。它们的默认值将与文本相等。由于您可以输入任意文本，因此不会进行验证。

<select class="form-select" id="tags-input" name="tags[]" multiple data-allow-new="true"></select>

您可以强制这些新标签遵守给定的正则表达式。

注意：如果需要多个值，不要忘记 []！

服务器端支持

您还可以使用服务器提供的选项。此脚本期望一个 json 响应，该响应是一个包含数据键的数组或对象，其中包含一个数组。

只需在您的端点设置 data-server。它应提供一个值/标签对象的数组。在初始化时填充建议，除非设置了 data-live-server，在这种情况下，它将在键入时填充。将传递一个带有当前搜索输入值的查询参数 ?query=。

您可以通过使用 data-selected 或在 json 结果中将建议标记为 selected 来预选择值。

<label for="validationTagsJson" class="form-label">Tags (server side)</label>
<select
  class="form-select"
  id="validationTagsJson"
  name="tags_json[]"
  multiple
  data-allow-new="true"
  data-server="demo.json"
  data-live-server="1"
>
  <option disabled hidden value="">Choose a tag...</option>
</select>

您可以使用 data-server-params 传递额外参数，并使用 data-server-method（GET 或 POST）选择方法。

以编程方式设置数据

您可以使用 items 配置键来传递选项。这些将被添加到选择对象中。项目可以是建议的数组，或者是一个键：值对象。

您还可以手动调用 setData。

选项

选项可以是传递给构造函数的（例如：optionName），或者使用数据-option-name 格式。您还可以使用具有 json 编码字符串的 data-config 属性。

您可以使用 setConfig 在以后更改这些配置选项。

要了解更多关于这些功能的信息，请查看演示！

回调函数

事件回调 ⇒ void

服务器回调 ⇒ Promise

错误回调 ⇒ void

ModalItem回调 ⇒ Promise

渲染回调 ⇒ String

项目回调 ⇒ void

值回调 ⇒ void

添加回调 ⇒ void | Boolean

创建回调 ⇒ void

提示

• 您还可以将其用于单选框！:-)
• 使用箭头向下显示下拉菜单
• 如果您有一个非常长的选项列表，将使用滚动条
• 使用 Tags.getInstance(mySelect) 在给定元素上访问 Tags 实例

样式

虽然样式不是必需的，但一些伪样式可以帮助您与常规 bootstrap 表单控件对齐。我们基本上将输入状态作为伪类复制到表单控件容器上

• 通过实现伪类 form-control-focus 支持焦点样式
• 通过实现伪类 form-placeholder-shown 支持改进的浮动标签
• 通过实现伪类 form-control-disabled 支持禁用样式

这些样式可以在 _tags.scss 中找到

您还可以使用 tags-pure.scss 文件，它为您提供只包含 CSS 变量的所需样式版本（与 Bootstrap 5.3 兼容良好）。

不使用 Bootstrap 5

Bootstrap 4 支持

尽管最初并没有打算支持 Bootstrap 4，但由于只需进行最小更改，这个组件现在与 Bootstrap 4 兼容。

查看 demo-bs4.html

独立使用

显然，这个包与完整的 Bootstrap 库配合得很好，但您也可以在不使用 Bootstrap 或使用其精简版本的情况下使用它。

实际上，这个库甚至没有使用 JavaScript 库来定位下拉菜单，因此它只依赖于 CSS 类。您可以通过查看 .scss 文件来了解如何将 Bootstrap 5 CSS 减小到更小的尺寸。

查看 demo-standalone.html

演示

https://codepen.io/lekoalabe/pen/ExWYEqx

看起来如何？

您需要自动初始化它吗？

您现在可以将它作为自定义元素作为我 Formidable Elements 收藏集的一部分使用。

或者您可以使用 Modular Behaviour (查看演示)

浏览器支持

现代浏览器（Edge、Chrome、Firefox、Safari 等，不包括 IE11）。如果需要，请添加警告 nomodule-browser-warning.js。

也请查看

• Bootstrap5 autocomplete：Bootstrap 5（及其更多）的自动完成输入
• BS Companion：完美的 Bootstrap 伴侣
• Admini：简约风格的 Bootstrap 5 管理面板

如何贡献

如果您想提交 PR，请在 tags.js 中进行更改，并且不要提交任何构建文件。它们将在新版本发布时更新。

如果您想测试您的更改，只需运行 npm start 并在 demo.html 中进行测试（您可以添加新的测试用例）。

对于 scss 更新，请将更改应用于 scss 文件。由于它们不是为了单独使用而设计的，因此需要手动编译。