javascript - HTML:有没有办法让用户输入他们的输入，但也有一个下拉选择菜单？

Question

比如我有

 <label class="form">Menu</label>
      <select id="selection" name="select" required>
           <option value="" selected>--Select an Option--</option>
           <option value="option1">Option 1</option>
           <option value="option2">Option 2</option>
           ...
      </select>

这只会在用户用鼠标点击输入框时提供一个下拉菜单。但我想让他们能够在输入框中输入以下内容:

如果用户输入 option1，它会将他们引导至“Option 1”下拉菜单等。如果用户输入任何其他未包含在下拉菜单中的词，下列表将显示“无效输入”。

Answer 1

是的，有!具有列表属性的文本输入:

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

编辑:对于自动完成，尝试 Bootstrap Typeahead