I'm trying to implement this "filtered dropdown" pattern for mobile users:

By default, of course, a <select> control is closed, until the user clicks it open.

Is there a simple way to keep it always open? I understand it wouldn't strictly be a "dropdown" then - more like a traditional Windows "list" control.

(Multiple select is not appropriate for this application).

I'm using VueJS if that's relevant.

My current code:

    <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>