带有输入框的HTML选择下拉菜单

Question

如何在HTML中实现一个下拉式选择菜单，并且包含文本输入选项？

目的是让用户可以从预定义的选项列表中选择，或者输入自己的选项。

- jesal

---

search field == input text field - Adil Shaikh

@MohammadAdil 是的，但你知道我的意思 :) - jesal

Answer 1

您可以使用具有“list”属性的输入文本，该属性引用值数据列表。

<input type="text" name="city" list="cityname">
    <datalist id="cityname">
      <option value="Boston">
      <option value="Cambridge">
    </datalist>

这将创建一个自由文本输入字段，还带有下拉菜单以选择预定义的选项。例如和更多信息的归因：https://www.w3.org/wiki/HTML/Elements/datalist

- Oleg

---

嗨，Oleg。原帖作者要求提供插件或一些示例代码 - 你能详细说明如何应用“list”属性来实现他们想要的吗？谢谢。 - Wai Ha Lee

哇。现在我学到了新东西。我认为不多的程序员知道这个简单的技巧来解决问题。谢谢。 - user1021364

Datalist可以起到作用，但在某些浏览器（例如Chrome）上的显示可能会出现问题。与<select>元素相反，您无法样式化datalist元素，甚至无法简单地添加滚动条，这对于长列表来说是一个大问题。 - Vincent Teyssier

Safari完全不支持此功能。http://www.w3schools.com/tags/tag_datalist.asp - PeterM

有没有一种方法可以只用单击打开选择框。目前，如果我在输入字段上点击两次或单击向下箭头，它才能被打开。 - CraZyDroiD