How to Enable Autofill in Vue AutoComplete

03 Sep 20266 minutes to read

The AutoComplete supports the autofill behavior with the help of the autofill property. Whenever you change the input value, the AutoComplete will autocomplete your data by matching the typed character. If no matches are found, the AutoComplete does not suggest any item.

The following sample demonstrates how autofill works with the AutoComplete.

<template>
  <div id="app">
    <ejs-autocomplete :autofill='autofill' :dataSource='searchData' :fields='fields'
      :placeholder="waterMark"></ejs-autocomplete>
  </div>
</template>
<script setup>
import { AutoCompleteComponent as EjsAutocomplete } from '@syncfusion/ej2-vue-dropdowns';

const waterMark = 'Find a country';
const searchData = [
  { Name: 'Australia', Code: 'AU' },
  { Name: 'Bermuda', Code: 'BM' },
  { Name: 'Canada', Code: 'CA' },
  { Name: 'Cameroon', Code: 'CM' },
  { Name: 'Denmark', Code: 'DK' },
  { Name: 'France', Code: 'FR' },
  { Name: 'Finland', Code: 'FI' },
  { Name: 'Germany', Code: 'DE' },
  { Name: 'Greenland', Code: 'GL' },
  { Name: 'Hong Kong', Code: 'HK' },
  { Name: 'India', Code: 'IN' },
  { Name: 'Italy', Code: 'IT' },
  { Name: 'Japan', Code: 'JP' },
  { Name: 'Mexico', Code: 'MX' },
  { Name: 'Norway', Code: 'NO' },
  { Name: 'Poland', Code: 'PL' },
  { Name: 'Switzerland', Code: 'CH' },
  { Name: 'United Kingdom', Code: 'GB' },
  { Name: 'United States', Code: 'US' }
];
const fields = { value: 'Name' };
const autofill = true

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";

#app {
  color: #008cff;
  height: 40px;
  left: 35%;
  position: absolute;
  top: 15%;
  width: 30%;
}
</style>
<template>
  <div id="app">
    <ejs-autocomplete :autofill='autofill' :dataSource='searchData' :fields='fields'
      :placeholder="waterMark"></ejs-autocomplete>
  </div>
</template>
<script>
import { AutoCompleteComponent } from '@syncfusion/ej2-vue-dropdowns';

export default {
  name: "App",
  components: {
    "ejs-autocomplete": AutoCompleteComponent
  },
  data() {
    return {
      waterMark: 'Find a country',
      searchData: [
        { Name: 'Australia', Code: 'AU' },
        { Name: 'Bermuda', Code: 'BM' },
        { Name: 'Canada', Code: 'CA' },
        { Name: 'Cameroon', Code: 'CM' },
        { Name: 'Denmark', Code: 'DK' },
        { Name: 'France', Code: 'FR' },
        { Name: 'Finland', Code: 'FI' },
        { Name: 'Germany', Code: 'DE' },
        { Name: 'Greenland', Code: 'GL' },
        { Name: 'Hong Kong', Code: 'HK' },
        { Name: 'India', Code: 'IN' },
        { Name: 'Italy', Code: 'IT' },
        { Name: 'Japan', Code: 'JP' },
        { Name: 'Mexico', Code: 'MX' },
        { Name: 'Norway', Code: 'NO' },
        { Name: 'Poland', Code: 'PL' },
        { Name: 'Switzerland', Code: 'CH' },
        { Name: 'United Kingdom', Code: 'GB' },
        { Name: 'United States', Code: 'US' }
      ],
      fields: { value: 'Name' },
      autofill: true
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";

#app {
  color: #008cff;
  height: 40px;
  left: 35%;
  position: absolute;
  top: 15%;
  width: 30%;
}
</style>