html - 如何在 HTML 中创建可编辑的下拉列表？

Question

我想创建一个带有下拉列表的文本字段，让用户可以选择一些预定义的值。用户还应该能够键入新值或从下拉列表中选择预定义的值。我知道我可以为此使用两个小部件，但在我的应用程序中，如果它统一在一个小部件中会更符合人体工程学。

是否有标准小部件，还是我必须使用第三方 javascript？

浏览器的可移植性如何？

Answer 1

您可以使用 <datalist> 来完成此操作HTML5 中的标记。

<input type="text" name="product" list="productName" />
<datalist id="productName">
  <option value="Pen">Pen</option>
  <option value="Pencil">Pencil</option>
  <option value="Paper">Paper</option>
</datalist>

如果您在浏览器中双击输入文本，将出现一个包含已定义选项的列表。