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

Question

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

这是我想要构建的：

1. 当我从下拉列表中单击任何项目时，它会在输入字段中添加该项目，这与它在图像中的显示方式完全相同。
2. 当我在输入字段中按退格键时，应立即删除整个名称。
3. 我可以添加多个名称并将它们发送到输入字段中

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

Answer 1

一种方法是：

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

您有一个容器，在容器内您首先动态插入所选选项（内部div s），然后呈现一个输入，该输入采用空间的 rest。 此外，您应该呈现一个为您处理列表的菜单。

1. 您可以使用 javascript 来完成。 您应该知道单击了哪个值添加在容器内添加元素。 （您可以使用 function 获得选项的 label）

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

3. 我认为如果您在输入之外呈现其他选项会更好（并且更容易）。

我建议查看material-ui Autocomplete并使用您的浏览器检查它，或者如果您喜欢查看 github 中的代码。 （或其他已经实现的库）