Vuejs : How to trigger an event on keyup in Vue-multiselect

Question

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's search).

I found an npm package: https://www.npmjs.com/package/vue-multiselect

This is working fine when given already initialized dropdown items.

<multiselect
  v-model="valueabc"
  :options="websites"
  label="url"
  track-by="url"
  class="header-select mr-3"></multiselect>

I want to populate options with the result of values populated from API result, but I couldn't find an event to be trigerred on keyup.

Tried: v-on:keyup.enter="eventname" and @keydown="eventname":

<multiselect ... v-on:keyup.enter="eventname"></multiselect>

<multiselect ... @keydown="eventname"></multiselect>

I'm afraid this cannot be achieved using this package.

Answer 1

vue-multiselect does have an ability to populate items asynchronously (for ajax loading, for example), no need to reinvent the wheel. Read the doc here.

In short, you do it like this:

<multiselect
  v-model="valueabc"
  :options="websites"
  label="url"
  track-by="url"
  class="header-select mr-3"
  :searchable="true"
  :internal-search="false"
  :loading="isLoading"
  :clear-on-select="false"
  :show-no-results="false"
  @search-change="searchWebsites"
/>

export default {
  data() {
    return {
      websites: [],
      isLoading: false,
    };
  },
  methods: {
    async searchWebsites(query) {
      this.isLoading = true;
      // make API request to load websites
      this.websites = await loadWebsites(query);
      this.isLoading = false;
    },
  },
};

You should adapt this example to suit your needs though.