How do I make a ComboBox in Bootstrap Vue?

Question

I'm trying to make a ComboBox in Bootstrap Vue v2.21.2, without using Vuetify's v-combobox.

I've tried using https://github.com/danielfarrell/bootstrap-combobox but it doesn't seem to work well, and I'd rather use an existing Bootstrap component than apply an external CSS plugin.

Is there a way to create a ComboBox in Bootstrap Vue? Or do I have to switch to Vuetify for this?

Answer 1

Using vue-multiselect will help you since this package provides searching in dropdowns.

I looked a little for the combobox title and found this vue-bootstrap-ajax-combobox.

I recommend vue-multiselect because I've been using it with bootstrap-vue.

I prepared one snippet to show how vue-multiselect works perfectly for searching in dropdowns.

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: {
      name: 'John',
      email: 'john@domain.com'
    },
    options: [{
        name: 'John',
        email: 'john@domain.com'
      },
      {
        name: 'Ada',
        email: 'ada@domain.com'
      },
      {
        name: 'Nick',
        email: 'nick@domain.com'
      }
    ]
  },
  methods: {
    custom_label(option) {
      return `${option.name} - ${option.email}`
    }
  }
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://unpkg.com/vue-multiselect@2.0.2/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-multiselect@2.0.3/dist/vue-multiselect.min.js"></script>
<div id="app">
  <multiselect v-model="value" :options="options" :multiple="true" track-by="email" :custom-label="custom_label">
  </multiselect>
  <pre>{{ value }}</pre>
</div>