Buefy — Autocomplete Customization

Image for post
Image for post
Photo by Vitto Sommella on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Header

We can add a custom header to the autocomplete.

To do that, we populate the header slot:

<template>
<section>
<b-field label="favorite fruit">
<b-autocomplete
rounded
v-model="name"
:data="filteredDataArray"
placeholder="fruit"
clearable
ref="autocomplete"
@select="option => selected = option"
>
<template slot="empty">No results found</template>
<template slot="header">
<a @click="showAddFruit">
<span>Add new...</span>
</a>
</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
data: ["apple", "orange", "grape"],
name: ""
};
},
methods: {
showAddFruit() {
this.$buefy.dialog.prompt({
message: `Fruit`,
inputAttrs: {
placeholder: "fruit",
maxlength: 20,
value: this.name
},
confirmText: "Add",
onConfirm: value => {
this.data.push(value);
this.$refs.autocomplete.setSelected(value);
}
});
}
},
computed: {
filteredDataArray() {
return this.data.filter(option => {
return (
option
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
);
});
}
}
};
</script>

We populate the header slot with a link.

When we click the link, the showAddFruit method is called.

In the method, we show the prompt and set the value to the this.name as the value.

Also, we call this.$refs.autocomplete.setSelected method to set the selected value of the dropdown.

Autocomplete Footer

We can populate the footer slot with the footer.

For example, we can write:

<template>
<section>
<b-field label="favorite fruit">
<b-autocomplete
rounded
v-model="name"
:data="filteredDataArray"
placeholder="fruit"
clearable
ref="autocomplete"
@select="option => selected = option"
>
<template slot="empty">No results found</template>
<template slot="footer">
<a @click="showAddFruit">
<span>Add new...</span>
</a>
</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
data: ["apple", "orange", "grape"],
name: ""
};
},
methods: {
showAddFruit() {
this.$buefy.dialog.prompt({
message: `Fruit`,
inputAttrs: {
placeholder: "fruit",
maxlength: 20,
value: this.name
},
confirmText: "Add",
onConfirm: value => {
this.data.push(value);
this.$refs.autocomplete.setSelected(value);
}
});
}
},
computed: {
filteredDataArray() {
return this.data.filter(option => {
return (
option
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
);
});
}
}
};
</script>

Now the ‘Add new…’ text is at the bottom of the autocomplete dropdown instead of the top.

Groups

Options can be separated into groups.

For example, we can write:

<template>
<section>
<b-field label="favorite fruit">
<b-autocomplete
v-model="name"
group-field="type"
group-options="items"
open-on-focus
:data="filteredDataArray"
@select="option => (selected = option)"
>
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
name: "App",
data() {
return {
data: [
{
type: "Fruit",
items: ["Apple", "Banana", "Watermelon"]
},
{
type: "Vegetables",
items: ["Carrot", "Broccoli", "Cucumber", "Tomato"]
}
],
name: ""
};
},
computed: {
filteredDataArray() {
const newData = [];
this.data.forEach(element => {
const items = element.items.filter(item =>
item.toLowerCase().includes(this.name.toLowerCase())
);
if (items.length) {
newData.push({ type: element.type, items });
}
});
return newData;
}
}
};
</script>

to separate our items into groups and search for them.

We have the group-field which is set to the property for separating the groups.

And group-options has the property with the available items.

The filteredDataArray computed property now has to search the items property instead of the whole this.data array.

Conclusion

We can customize our autocomplete dropdowns in many ways with Buefy.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store