I am currently working on implementing a mobile-friendly "filtered dropdown" design:
https://i.sstatic.net/SYjQO.png
Usually, a <select> control remains closed until the user clicks to open it.
Is there a straightforward way to keep it always open? I understand that this would make it more like a traditional Windows "list" control rather than a true dropdown menu.
(Using multiple select is not suitable for this particular case).
I am using VueJS for this project.
Below is the current code snippet in use:
<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>