[Vuejs]-Is it possible to use Vue Buefy autocomplete as select with search?

by

0👍

In order for the autocomplete to work, you need to filter the list yourself and pass the results back to the component. To do this, we created a computed property like this:

<template>
  <section>
    <b-autocomplete v-model="country" :data="filteredCountries" field="name" :keep-first="true" placeholder="Select Country" :open-on-focus="true"></b-autocomplete>
  </section>
</template>

<script type="text/javascript">
export default {
  data: () => ({
    country: '',
    countries: [
      {
        name: 'Slovakia',
        key: 'SK'
      },
      {
        name: 'England',
        key: 'EN'
      },
      {
        name: 'United States of America',
        key: 'USA'
      }
    ]
  }),
  computed: {
    filteredCountries () {
      if (this.country !== null) {
        return this.countries.filter((option) => {
          return option.name.toString().toLowerCase().indexOf(this.country.toLowerCase()) >= 0
        })
      } else {
        return this.countries
      }
    }
  }
}
</script>

Leave a comment