css - 过滤选项时保持下拉<select>控件处于打开状态

我正在尝试为移动用户实现此“过滤下拉列表”模式：



当然，默认情况下，<select>控件是关闭的，直到用户单击它为止。

有没有简单的方法可以使其始终打开？我知道那绝对不是严格的“下拉列表”，更像是传统的Windows“列表”控件。

（多次选择不适用于此应用程序）。

如果相关，我正在使用VueJS。

我当前的代码：

    <p>Start typing your suburb name...</p>
    <input type="text" length="50" v-model="suburbFilter">
    <br>
    <select id="suburb-select" v-model="suburb" >
        <option v-for="suburb in filteredSuburbs">
            {{ suburb }}
        </option>
    </select>

最佳答案

我使用这个组件
https://paliari.github.io/v-autocomplete/，它非常可定制