Keep dropdown <select> control open while filtering options

Question

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>

you can use ideas form here:stackoverflow.com/questions/18796221/… — לבני מלכה
– לבני מלכה, Commented Jul 31, 2018 at 5:50
Thanks, but those are jQuery components and I'm not using jQuery. — Steve Bennett
– Steve Bennett, Commented Jul 31, 2018 at 5:51
autocomplete using js:w3schools.com/howto/howto_js_autocomplete.asp — לבני מלכה
– לבני מלכה, Commented Jul 31, 2018 at 5:53

Cosimo Chellini · Accepted Answer · 2018-07-31 13:03:47Z

1

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

answered Jul 31, 2018 at 13:03

Cosimo Chellini

1,7201 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler Brown · Accepted Answer · 2018-07-31 05:56:05Z

0

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.

answered Jul 31, 2018 at 5:56

Tyler Brown

1

Collectives™ on Stack Overflow

Keep dropdown <select> control open while filtering options

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related