如何在HTML中创建带默认文本的可编辑ComboBox？

简短版问题 #

如何在HTML中制作ComboBox？

详细版需求 #

如何在HTML中创建一个带有默认文本的可编辑下拉框？

具体要求如下：

• 一个用户可输入的文本框
• 用户可点击（或按Alt+Down）展开下拉列表
• 可选择预定义文本
• 文本框默认显示实用的默认文本，该文本不一定在下拉列表中

类似标准Windows ComboBox控件，或WinForms ComboBox：

尝试方案 #

我尝试了以下HTML代码：

<input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

但下拉列表并未显示：

当用户删除现有文本后，下拉列表才会显示：

这完全违背了下拉框的设计初衷。

因此，我的问题是：

如何在HTML中制作ComboBox？

完整最小可复现示例（CRME） #

你可以在沙箱中调试：

• jsFiddle：7t1zgqo6

内容的提问来源于stack exchange，提问作者Ian Boyd