组合和

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>

希望有帮助！