带有下拉选项的html / js文本输入字段

Question

我想要一个文本输入字段，该字段也具有可选的下拉菜单。理想的ui看起来像默认情况下的文本输入并接受文本，但是当您单击箭头时，将显示一个下拉列表。最好使用select2实现下拉菜单，以便轻松搜索值（这就是我已经尝试过的方法）。

我的第一次尝试是在select2中使用了标记功能，但这并不是我想要的，因为用户将要键入然后选择新的输入。在这种情况下，默认值也不是文本输入。谢谢你的帮助。同样，这些选项也无法进行硬编码，因为我们正在轮询数据库以查找列表将显示的项目。

更新： 一个示例将类似于以下内容：jqueryui.com/datepicker/#icon-trigger ...，其中默认值为输入文本字段，并且我们有一个按钮来选择日期，但是在这种情况下，它是一个将在文本字段上覆盖一个下拉菜单。

我也查看了数据列表，它可以工作，但我认为您不能对选项进行硬编码。

类似这样的事情：http://jqueryui.com/autocomplete/#combobox ..将是完美的。但是更改将是它必须接受任何输入的选项，而不是拒绝它，而是从列表中获取。我不太熟悉前端的东西，所以如果可能的话，您能告诉我方法和基本思想吗？我不认为该列表可以填充http get请求之类的内容？

Answer 1

尝试使用数据列表html标签：

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>