CODEWITHSUNDEEP
javascriptvue.js
theFrontEndDev
theFrontEndDev

Reputation: 973

Event not getting triggered on Key Press

<multiselect v-model="value" :options="websites" label="url" track-by="url" :allow-empty="false" class="header-select mr-3" v-on:keyup.enter="submit"></multiselect>

Requirement - I have searchable dropdown, initially I will not have any dropdown items, But once a user enters a letter I wish to call an api that will give me a list of dropdown items starting with that letter ( eg Typing A should return apple, ant ... etc )

In short - I need an input field with dropdown. ( similar to google-search )

Key press event is not working in the multiselect, There are events for @change etc that works on selecting the dropdown item of that multiselect, But I wanted the keypress to work and trigger an event. - https://vue-multiselect.js.org/#sub-events

I used an npm package - https://www.npmjs.com/package/vue-multiselect, https://vue-multiselect.js.org/ ( We can't achieve this with normal input field right ? Keypress would work there , but how to combine it with a dropdown ? )

Can anyone help me to solve this problem , If the problem is with the package that it cannot trigger a key up event, can anyone suggest another package for this purpose ?

Upvotes: 1

Views: 610

Answers (1)

Michael Mano
Michael Mano

Reputation: 3440

OK so i've gone over the codebase of that component and there is no @keydown event as the parent is not an input. It's wrapped in a div.

There is an event that is triggered when the search term is updated which can be seen here

The event you want to listen for is @search-change

e.g.

    <multiselect
    v-model="value"
    :options="websites"
    label="url"
    track-by="url"
    :allow-empty="false"
    class="header-select mr-3"
    @search-update="myFunctionThatWillTriggerSomething"
    v-on:keyup.enter="submit"/>

But be aware, Triggering your api call when the search-update event is called will spam your api. You will want to look at debouncing it.

Upvotes: 1

Related Questions