组合的<input type ='text'>和<select>

Question

我的Web应用程序需要一个文本输入框，该文本输入框也可以作为<select>的结果。我们拥有的设计如下

当用户在<input>框中键入内容时，将显示一个带有单个选项“转到...”的下拉列表（其中blah是输入内容）。

当用户按下右侧的向下箭头时，应显示选项列表。选择这些选项之一应将所选内容替换为可编辑输入的内容。

实现此目标的最佳方法的任何指针？我可以实现自己的目标，但这听起来像是一项承诺。理想情况下，我想（全部或部分）利用某些现有库，并说服向下箭头打开一个与输入大小相同的下拉列表，而<input>由我控制。

图像中的示例是使用react-select生成的，但是我无法说服库按照我描述的方式工作。

Answer 1

要实现类似的目的，可以将input list与datalist一起使用。

  

HTML <datalist>元素包含一组<option>元素   代表可用于   从其他控件中选择。 （MDN）

示例：

<label for="url2go2">Go to:</label>
<input list="urls" id="url2go2" name="url2go2" placeholder="/" />
<datalist id="urls">
    <option value="/url1">
    <option value="/url2">
    <option value="/url3">
    <option value="/url4">
    <option value="/url5">
</datalist>

希望有帮助！