Datalist 输入：点击添加，而不是替换答案

【问题标题】：Datalist Input: Click to Add, Not ReplaceDatalist 输入：点击添加，而不是替换
【发布时间】：2018-07-27 15:14:23
【问题描述】：

我一直在研究这个，但似乎找不到符合条件的搜索词。

我想要一个 datalist 文本输入（最好仍然保留自动完成功能），但是当用户从列表中单击一个项目时，我希望它被添加到输入中，而不是替换输入的全部内容。

例如，我有一个建筑物位置列表，包括“后门”、“前门”、“一楼”、“二楼”等。用户应该能够从列表中单击“一楼” ，然后是“一楼”，这导致输入的值为“一楼前门”。我可以想出几种方法来实现这一点，但我不知道如何为数据列表公开 javascript，如果这可能的话。

编辑：香草数据列表：https://jsfiddle.net/h7gwjrm2/

<input list="data-list" placeholder="Double Click for List...">

<datalist id="data-list">
  <option>First Floor</option>
  <option>Second Floor</option>
  <option>Back Door</option>
  <option>Front Door</option>
</datalist>

【问题讨论】：

您是否已准备好您的任何minimal reproducible example 代码，以便我们可以重现您的起点？
问题是，我什至不知道从哪里开始。制作一个香草数据列表很简单，所以我也没有费心把它包括在内。

标签： javascript input datalist

【解决方案1】：

挖了几个小时后，我想我终于找到了可以解决问题的方法。 Flexdatalist 有一个用于同一输入的多个项目的选项。无论如何，感谢所有关注我问题的人。

http://projects.sergiodinislopes.pt/flexdatalist/

【讨论】：

【解决方案2】：

如何添加到结果而不是替换。这应该让你开始。下次发布您首先尝试的内容，以便我们有更好的想法。

let locations = ["back door", "front door", "first floor", "second floor"];
let result = "";
for (let i = 0; i < locations.length; i++) {
  result += locations[i] + " ";
}
alert(result);

【讨论】：

我不是这个意思。我的意思是能够从数据列表输入中选择多个项目。我为一个普通的添加了一个 jsfiddle，它只从列表中选择一个。