Taglist

• 基本示例
• 过滤
• 允许新值
• 动态选项
  • 搜索参数
  • 页面和hasNextPage参数
  • 加载样式
  • 选项加载器
  • 加载样式
  • 创建时加载
• 标签外观
• 行为属性
  • 空消息
  • 最大值
  • 选择后关闭
  • 提交后重新加载
  • 点击打开
  • 聚焦打开
  • 移除后打开
• 完整示例
• Props & Attributes

taglist 输入允许用户在选项列表中搜索并应用任意数量的标签。用户还可以拖放标签进行重新排序：

options 属性可以接受三种不同格式的值：

• 具有 value 和 label 键的对象数组（参见上面的例子）
• 字符串数组 ['A', 'B', 'C']
• 带有键值对的对象字面量 { a: 'A', b: 'B', c: 'C' }
• 返回上述任何内容的函数

基本示例

taglist 输入允许用户在选项列表中搜索并应用任意数量的标签。用户还可以拖放标签进行重新排序：

过滤

标签列表输入将使用其自己的内部搜索函数过滤选项。你可以通过提供你自己的函数给 filter 属性来替换这个搜索函数。你的函数将接收两个参数，正在迭代的 option 和当前的 search 值：

允许新值

与标签列表或自动完成输入不同，标签列表输入允许你输入一个任意值（一个不在选项列表中的值）。这对于即时创建新标签非常有用。要启用此功能，将 allow-new-values 属性设置为 true。

动态选项

你可以将一个函数赋值给 options 属性，而不是传递一个静态列表。当你需要从 API 或其他源加载选项时，这样做很有用。

搜索参数

在这个例子中，我们将 options 属性赋值给 searchMovies 函数。这样做的话，searchMovies 将接收 context 对象作为参数。在这个 context 对象中有 search 属性，这是当前的搜索值。为了执行我们的搜索，我们将使用 search 值作为我们 API 请求的查询参数：

页面和hasNextPage参数

你可能会遇到需要通过分页API进行搜索的情况。这可以通过引用之前的context对象来完成。在这个对象中，我们可以使用page和hasNextPage属性。page属性是当前的页码，hasNextPage属性是一个在有更多页面需要加载时被调用的函数：

加载样式

你可以设置loadOnScroll属性为true，这样当你滚动到选项列表的底部时，会自动分页选项，而不是要求用户点击加载更多按钮来加载更多选项。

选项加载器

重新注入值

FormKit的taglist输入还提供了一个optionLoader属性，允许你重新注入不在选项列表中的值。在这个例子中，我们将为taglist提供一个初始值（一个电影ID），并将optionLoader分配给一个将向API发出请求获取电影的函数：

注意在上面的例子中，optionLoader函数传递了两个参数：选定选项的value（在这种情况下，是电影ID）和cachedOption。cachedOption用于防止不必要的查找。如果cachedOption不是null，那么意味着已经加载了选定的选项，你可以直接返回cachedOption。

加载样式

你可以设置loadOnScroll属性为true，这样当你滚动到选项列表的底部时，会自动分页选项，而不是要求用户点击加载更多按钮来加载更多选项。

创建时加载

如果你更愿意在创建taglist时加载选项，你可以将load-on-created属性设置为true，我们的函数loadCurrentlyPopularMovies将在用户无需展开列表框的情况下被调用：

标签外观

就像taglist输入或自动完成输入，taglist输入允许你利用插槽来自定义选项列表和选定选项的外观和感觉，通过利用无渲染组件模式。

在这个例子中，我们将使用tag插槽来自定义标签的外观：

行为属性

空消息

默认情况下，当过滤时没有找到搜索结果时，标签列表输入框不会展开列表框。您可以通过为 empty-message 属性分配一个消息来改变这种行为，当没有找到结果时显示该消息：

最大值

max 属性允许您限制可以选择的选项数量。当达到 max 限制时，标签列表输入框将禁用列表框：

选择后关闭

如果您希望标签列表的列表框在选择之间保持打开状态，将 close-on-select 属性设置为 false：

提交后重新加载

如果您希望用户提交选择后重新加载选项（对于静态选项，这将使用空字符串的值过滤选项，对于动态选项，这将使用空字符串的值向选项加载器发出请求），请使用 reload-on-commit 属性：

点击打开

要启用点击其搜索输入时打开标签列表的列表框，将 open-on-click 属性设置为 true：

聚焦打开

如果您希望在其搜索输入被聚焦时打开标签列表的列表框，将 open-on-focus 属性设置为 true：

移除后打开

如果您希望在选择被移除时展开列表框，使用 open-on-remove 属性：

完整示例

现在让我们通过利用 tag 插槽进行自定义标记，并将 options 属性设置为一个将从 API 返回电影页面的函数，来结合我们到目前为止学到的内容：

Props & Attributes