Johnny John Boy
Reputation: 3222
How to make my VueJA/Buefy autocomplete display filtered options?
I'm using VueJS and Beufy for an autocomplete and I thought I had this working but can't seem to get the filter correct. When I enter the description the input box filters (try typing ar and it filters correctly) but I see no options to select. The options are physically there as I can click on one of the options and I will see my data like this:
The second issue, presumably related is that when I do select one of these invisible options I get the following error:
vue:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"
I think the descriptions are blank in the autocomplete so selecting one means there is nothing toLoweCase().
What have I missed please?
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
@select="option => selected = option">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
Upvotes: 3
Views: 957
Answers (1)
Johnny John Boy
Reputation: 3222
This was harder to find than I thought but trial an error and I realised that I had missed the following field:
field="Description"
You need to tell the autocomplete field which key from the object you want to use in the dropdown, in my case it was Description so working code is:
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
field="Description"
@select="option => (selected = option)">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
Upvotes: 4
Related Questions
- setting up v-autocomplete with search function
- How to make vuetify v-autocomplete behave like a search bar?
- Loop event fired with buefy autocomplete
- How to have Vue/Vuetify Autocomplete filter on two properties?
- Autocomplete Vue Js
- v-autocomplete does not show drop down if the search term does not match
- Vuetify v-autocomplete object custom filter
- Buefy autocomplete in v-for
- Vuetify Autocomplete minimum character before filtering
- v-autocomplete - filter by values that start with the input value