Vue Autocomplete - Overview

The Autocomplete UI component is a textbox that provides suggestions while a user types into it.

View Demo

The following code adds the Autocomplete to your page. The simplest configuration of the UI component requires only a dataSource to be specified. In addition, you can specify the placeholder to be displayed when the Autocomplete is empty.

  • <template>
  • <DxAutocomplete
  • :data-source="autocompleteData"
  • placeholder="Type country name..."
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxAutocomplete } from 'devextreme-vue/autocomplete';
  •  
  • export default {
  • components: {
  • DxAutocomplete
  • },
  • data() {
  • return {
  • autocompleteData: [
  • 'Afghanistan',
  • 'Albania',
  • // ...
  • ]
  • };
  • }
  • }
  • </script>

If your data is an array of objects, use the valueExpr property to specify the field providing suggestions.

  • <template>
  • <DxAutocomplete
  • :data-source="autocompleteData"
  • placeholder="Type country name..."
  • value-expr="country"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxAutocomplete } from 'devextreme-vue/autocomplete';
  •  
  • export default {
  • components: {
  • DxAutocomplete
  • },
  • data() {
  • return {
  • autocompleteData: [
  • { country: 'Afghanistan', capital: 'Kabul' },
  • { country: 'Albania', capital: 'Tirana' },
  • // ...
  • ]
  • };
  • }
  • }
  • </script>

Usually, the data field that provides suggestions is the same data field that is searched for the typed text. If in your case, it is two different fields: assign the field providing suggestions to the valueExpr property and the field to be searched - to the searchExpr property. Note that searchExpr also accepts arrays in case you need several fields to search in.

  • <template>
  • <DxAutocomplete
  • :data-source="autocompleteData"
  • placeholder="Type capital name"
  • value-expr="country"
  • search-expr="capital"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxAutocomplete } from 'devextreme-vue/autocomplete';
  •  
  • export default {
  • components: {
  • DxAutocomplete
  • },
  • data() {
  • return {
  • autocompleteData: [
  • { country: 'Afghanistan', capital: 'Kabul' },
  • { country: 'Albania', capital: 'Tirana' },
  • // ...
  • ]
  • };
  • }
  • }
  • </script>
See Also