DevExtreme Vue - Overview
The Autocomplete widget is a textbox that provides suggestions while a user types into it.
The following code adds the Autocomplete to your page. The simplest configuration of the widget 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 option 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 option and the field to be searched - to the searchExpr option. 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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Autocomplete - Customize Item Appearance
- Autocomplete - Configure Search Parameters
- Autocomplete API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.