use vue to dropdown select options

Question

I'm trying to drop-down the <option>s for a <select> when the user types into a text <input>. Here's what I've tried, but the <options> don't drop-down.

index.html

<input @input="onInput" type="text"/>
<select ref="select">
    <option>test</option>
</select>

index.js

new Vue({
    ...methods: {
        onInput() {
            this.$refs.select.click()
        }
    }    
})

What will the purpose of this UI be? Using the `datalist` element may be exactly what you need: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist. — chipit24, Jul 06 '19 at 17:01
hm I've never even heard of the `datalist` element... will have to check that out — Andrew Castellano, Jul 09 '19 at 15:18

score 0 · Accepted Answer · answered Jul 05 '19 at 15:26

0

It is not posible, see the following stackoverflow topic.

How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

Like mouseover or any event, this is not possible to do in any modern browser. It has nothing to do with VueJS

answered Jul 05 '19 at 15:26

Borjante

9,767
6
35
61

1

Thanks for the quick reply. Seems there is some conflicting opinions, but I'm going to trust your research on this and move onto another solution while continuing to wonder how the internet is able to function on the DOM API. Thank you – Andrew Castellano Jul 05 '19 at 15:34
jajaja, made some research, and newer browser version are deprecating support for "untrusted events". You are better of rethinking your UI. Best of luck – Borjante Jul 05 '19 at 15:36

use vue to dropdown select options

1 Answers1