CODEWITHSUNDEEP
cssvue.jsdrop-down-menumobile-website
Steve Bennett
Steve Bennett

Reputation: 126035

Keep dropdown <select> control open while filtering options

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

enter image description here

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>

Upvotes: 0

Views: 577

Answers (2)

Cosimo Chellini
Cosimo Chellini

Reputation: 1730

i use this component https://paliari.github.io/v-autocomplete/, it's pretty customizable

Upvotes: 1

Tyler Brown
Tyler Brown

Reputation: 1

If it's always open, then you could use <input type="radio">.

Create a filterable list a la: https://www.w3schools.com/howto/howto_js_filter_lists.asp

Then, instead of the <a> tags they're using, you can style a radio input in place of it.

Upvotes: 0

Related Questions