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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.