bootstrap-vue select components with filter options?
10,239
Solution 1
There is a possibility. Use b-form-datalist. See example in the manual https://bootstrap-vue.org/docs/components/form-input
<template>
<b-form-input list="my-list-id"></b-form-input>
<datalist id="my-list-id">
<option>Manual Option</option>
<option v-for="size in sizes">{{ size }}</option>
</datalist>
</template>
<script>
export default {
data() {
return {
sizes: ['Small', 'Medium', 'Large', 'Extra Large']
}
}
}
</script>
Solution 2
I built something for myself. Here are the code snippets in case it helps. I used a table because I wanted to show additional columns but it could be swapped for something else like a list of spans or buttons.
<template>
<div>
<div>
<b-form-input
class='search-input'
type='search'
v-model='filterCriteria'
v-on:click='toggleDropDown()'
v-on:keyup.enter='selectItem()'
:placeholder='placeholder'>
</b-form-input>
</div>
<div>
<b-collapse id='drop-down'>
<b-table
no-border-collapse
ref='collapsibleTable'
responsive='sm'
selectable
select-mode='single'
sticky-header='200px'
thead-class='d-none'
v-model='filteredRows'
:fields='fields'
:filter='filterCriteria'
:items='items'
:sort-by.sync='sortBy'
:sort-desc.sync='sortDesc'
@row-selected='rowSelected'>
</b-table>
</b-collapse>
</div>
</div>
</template>
<script>
export default {
data() {
return {
filterCriteria: '',
filteredRows: []
}
},
methods: {
toggleDropDown() {
this.$root.$emit('bv::toggle::collapse', 'drop-down')
},
selectItem() {
if (this.filteredRows.length === 1) {
this.$refs.collapsibleTable.selectRow(0)
}
},
rowSelected(rowArray) {
// No rows or 1 row can be selected
if (rowArray.length === 1) {
this.$emit('item-selected', rowArray[0])
this.filterCriteria = rowArray[0][this.display]
this.toggleDropDown()
}
}
},
props: {
display: {
required: true,
type: String
},
fields: {
required: true,
type: Array
},
items: {
required: true,
type: Array
},
placeholder: {
required: false,
default: 'Select'
},
sortBy: {
required: true,
type: String
},
sortDec: {
default: false,
required: false
}
}
}
</script>
Author by
Petro Gromovo
Updated on June 08, 2022Comments
-
Petro Gromovo almost 2 years
In vue project with bootstrap-vue I search how select component works https://bootstrap-vue.js.org/docs/components/form-select/ and do not see has it any filter options? If no are there some other bootstrap-vue select components/libraries with filter options?
"bootstrap-vue": "^2.1.0" "vue": "^2.6.10"
Thanks!