Ant Design Vue — Autocomplete

Image for post
Image for post
Photo by Campbell Boulanger on Unsplash

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

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

Autocomplete Input

We can add an autocomplete input withn the a-auto-complete component:

<template>
<a-auto-complete
v-model="value"
:data-source="dataSource"
style="width: 200px"
placeholder="input here"
@select="onSelect"
@search="onSearch"
@change="onChange"
/>
</template>
<script>
export default {
data() {
return {
value: "",
dataSource: ["apple", "orange", "grape"]
};
},
watch: {
value(val) {
console.log("value", val);
}
},
methods: {
onSearch(searchText) {
this.dataSource = this.dataSource.filter(d => d.includes(searchText));
},
onSelect(value) {
console.log("onSelect", value);
},
onChange(value) {
console.log("onChange", value);
}
}
};
</script>

We add the v-model directive to bind the inputted value to a reactive property.

It also emits the select , search , and change events.

select is emitted when we select an item.

search is emitted when we are searching.

change is emitted when we change the input.

data-source has an array with the data source.

Also, we can display the autocomplete item by populate the dataSource slot:

<template>
<div style="width: 250px">
<a-auto-complete
class="certain-category-search"
dropdown-class-name="certain-category-search-dropdown"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '300px' }"
size="large"
style="width: 100%"
placeholder="input here"
option-label-prop="value"
>
<template slot="dataSource">
<a-select-opt-group v-for="group in dataSource" :key="group.title">
<span slot="label">
{{ group.title }}
<a
style="float: right"
href="https://www.google.com/search?q=foo"
target="_blank"
rel="noopener noreferrer"
>more</a>
</span>
<a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
{{ opt.title }}
<span class="certain-search-item-count">{{ opt.count }} people</span>
</a-select-option>
</a-select-opt-group>
<a-select-option key="all" disabled class="show-all">
<a
href="https://www.google.com/search?q=baz"
target="_blank"
rel="noopener noreferrer"
>View all results</a>
</a-select-option>
</template>
<a-input>
<a-icon slot="suffix" type="search" class="certain-category-icon"/>
</a-input>
</a-auto-complete>
</div>
</template>
<script>
const dataSource = [
{
title: "Libraries",
children: [
{
title: "foo",
count: 10000
},
{
title: "bar",
count: 10600
}
]
},
{
title: "Articles",
children: [
{
title: "baz",
count: 100000
}
]
}
];
export default {
data() {
return {
dataSource
};
}
};
</script>

We loop through the items in the dataSource reactive property to display the items.

Also, we set the class attribute to set the classes for our auto-complete.

The input can be customized. We just add the input we want to use inside the a-auto-complete component inside:

<template>
<a-auto-complete
:data-source="dataSource"
style="width: 200px"
@search="handleSearch"
@select="onSelect"
>
<a-textarea
placeholder="input here"
class="custom"
style="height: 50px"
@keypress="handleKeyPress"
/>
</a-auto-complete>
</template>
<script>
export default {
data() {
return {
dataSource: ["apple", "orange", "grape"]
};
},
methods: {
onSelect(value) {
console.log("onSelect", value);
},
handleSearch(value) {
this.dataSource = this.dataSource.filter(d => d.includes(value));
},
handleKeyPress(ev) {
console.log("handleKeyPress", ev);
}
}
};
</script>

We put it in the a-textarea inside the a-auto-complete to use a text area instead of a text input.

Conclusion

We can add autocomplete inputs our Vue app with Ant Design Vue.

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