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

【问题标题】：html/js text input field with drop-down option带有下拉选项的 html/js 文本输入字段
【发布时间】：2018-12-14 12:39:18
【问题描述】：

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

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

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

我还查看了 datalist 并且可以使用，但我认为您不能对选项进行硬编码。

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

【问题讨论】：

使用html和css比javascript构建下拉
但我希望默认看起来像一个文本框而不是下拉菜单。理想情况下，使用我使用 select2 制作的现有下拉菜单，这样我就不必编写搜索。一个示例类似于：jqueryui.com/datepicker/#icon-trigger... 其中默认是输入文本字段，我们有一个按钮来选择日期，但在这种情况下，它是一个按钮，将覆盖下拉列表文本字段。

标签： javascript html select jquery-select2

【解决方案1】：

尝试使用 datalist 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>

【讨论】：

我在其他一些帖子中发现了这一点。看起来它还没有被所有浏览器很好地支持。我不确定是否可以填充数据列表并且不能像那样进行硬编码（下拉列表项来自轮询数据库）。
除 Safari 之外的所有现代浏览器（Chrome、Internet Explorer、Opera、Mozilla Firefox）都支持 Datalist，它也可以使用循环填充。