如何使用多种标签实现标签输入字段

Question

我想在我的网站上添加标签输入字段。请看一下截图。

https://snag.gy/1z3CTQ.jpg

此外，您可以在此处查看 - https://insurify.com/compare/#/cars/car_make/1

正如您在此处所看到的，当输入一个标签时，会显示不同类型的标签。

我需要一个这样的例子。

请有人帮助我!!

Answer 1

欢迎来到SO！我是Insurify的工程主管，我和我的团队“发明”了我们网站的那种输入（我们称之为多标签选择）。这不是一个简单的过程，因为我们之前从未见过类似的东西，所以我们最终创建了自定义代码来处理大部分功能。

我将尝试尽我所能解释它，以便您可以为您的产品创建类似的东西。

该组件基本上是混搭：

1. 响应式选择输入
2. 标签输入，
3. 多维模型/数据结构，
4. 一个管理它的控制器

我们正在使用API​​来抓取不同点的数据，并且我们正在缓存服务器上的数据以使其更快，但这些都不是特定于此输入的，所以我赢了＆＃39 ;详细说明如何处理。

它的工作方式是：

1. 控制器加载，并从模型中获取第一个数据列表。然后控制器呈现标签的包装器，并显示第一个下拉列表。我在这里假设你了解如何创建一个下拉选择列表和一个标签输入，或者你可以插入像jQuery UI这样的库来获取这些组件。
2. 在从列表中选择项目时，选择＆＃34;选择＆＃34;事件火灾。这会导致控制器隐藏选择列表，为所选项目呈现标记，然后加载并呈现后续列表以供选择。这个过程一直持续到选择了所有数据维，然后组件触发了一个完整的数据。事件让任何听众都知道输入已经完成。
3. 同时，完成后，可以输入添加或更新表单的隐藏输入（对于同步标准表单帖子）。在我们的例子中，我们是具有异步RESTful API的单页应用程序，因此所选值将持久保存到组件控制器的属性中，并在表单序列化时提取。
4. 当标签＆＃34; x＆＃34;单击，我们删除所有选择回到前一个标签。比如说，选择了4个标签，我们＆＃34; x＆＃34;第三个。第4个也将删除。删除标记后，将显示最低级别的选择列表。
5. 对于我们的组件，我们选择跳过任何只有一个项目的列表。对于那些，我们只需预先选择标签并转到下一个列表。因此，当预先选择的标签是x-ed时，我们也会删除前面的标签。

关于它。大多数工作都是加载数据并将它们连接在一起。

如果您对此组件的任何部分有特定问题，请随时提出另一个问题，我会尽力帮助您！