Ant Design Vue — Autocomplete

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.