我正在尝试在Bootstrap Vue v2.21.2中制作一个ComboBox，而不使用Vuetify的v-combobox。
我试过使用https://github.com/danielfarrell/bootstrap-combobox但它似乎工作不太好，我宁愿使用现有的Bootstrap组件，也不愿应用外部的CSS插件。
有没有一种方法可以在Bootstrap Vue中创建ComboBox？还是我必须为此切换到Vuetify？
使用vue multiselect将对您有所帮助，因为此包提供searching in dropdowns。
我找了一下组合框标题，找到了这个vue-bootstrap-ajax-combobox。
我推荐vue-multiselect，因为我一直在和bootstrap-vue一起使用它。
我准备了一个片段来展示vue-multiselect如何完美地在下拉列表中进行搜索。
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>