javascript - 如何在输入字段中添加多个值

Question

我正在尝试将自动完成下拉列表中的多个名称添加到输入字段，如下图所示。

这是我想要构建的:

当我单击下拉列表中的任何元素时，它会添加该元素
在输入字段中它是如何在图像中显示的。

当我在输入字段中按退格键时，应该立即删除整个名称。

我可以添加多个名称并将它们发送到输入字段

所以基本上名字应该放在那个盒子里面，那个盒子应该放在输入字段里面。我如何在 Javascript 中实现这一点？
我试着在网上搜索这个，但我不确定我是否为它输入了正确的关键字。我不知道它叫什么。

Answer 1

一种方法是:

<div>
  <div role="button">Eight</div>
  <input />
</div>

您有一个容器，在容器内部，您首先动态插入选定的选项(内部 div s)，然后渲染一个占用其余空间的输入。您还应该呈现一个为您处理列表的菜单。

你用javascript来做。您应该知道单击了哪个值在容器内添加添加元素。 (您可以使用函数来获取选项的标签)

一种方法是使用监听输入和 ... 中的关键事件。

我认为如果你在输入之外呈现其他选项会更好(也更容易)。

我建议看看 material-ui Autocomplete并使用浏览器检查它，或者如果您愿意，请查看 github 中的代码。 (或其他已经实现此功能的库)