Vue Autocomplete - Customize Item Appearance

For a minor customization of Autocomplete items, you can define specific fields in item data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.

  • <template>
  • <DxAutocomplete
  • :data-source="dataSource"
  • value-expr="text"
  • placeholder="Type first name..."
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxAutocomplete } from 'devextreme-vue/autocomplete';
  •  
  • export default {
  • components: {
  • DxAutocomplete
  • },
  • data() {
  • return {
  • dataSource: [
  • { text: 'James' },
  • { text: 'John', disabled: true },
  • { text: 'Joseph', visible: false }
  • ]
  • };
  • }
  • }
  • </script>

If you need a more flexible solution, define an itemTemplate.

  • <template>
  • <DxAutocomplete
  • :data-source="autocompleteData"
  • value-expr="country"
  • placeholder="Type country name..."
  • item-template="full">
  • <template #full="{ data }">
  • <div>
  • <p>Country: <b>{{data.country}}</b></p>
  • <p style="color:grey;">Capital: <b>{{data.capital}}</b></p>
  • </div>
  • </template>
  • </DxAutocomplete>
  • </template>
  •  
  • <script>
  • 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