CODEWITHSUNDEEP
vue.jsbootstrap-4vuejs2comboboxbootstrap-vue
klonoa123
klonoa123

Reputation: 738

How do I make a ComboBox in Bootstrap Vue?

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?

Upvotes: 0

Views: 2312

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1627

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: '[email protected]'
    },
    options: [{
        name: 'John',
        email: '[email protected]'
      },
      {
        name: 'Ada',
        email: '[email protected]'
      },
      {
        name: 'Nick',
        email: '[email protected]'
      }
    ]
  },
  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/[email protected]/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/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>

Upvotes: 2

Related Questions