All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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.

jQuery
HTML
JavaScript
<div id="autocompleteContainer"></div>
const autocompleteData = [
    "Afghanistan",
    "Albania",
    // ...
];
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type country name...'
    });
});
Angular
HTML
TypeScript
<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type country name...">
</dx-autocomplete>
import { DxAutocompleteModule } from 'devextreme-angular'
// ...
export class AppComponent {
    autocompleteData = [
        "Afghanistan",
        "Albania",
        // ...
    ]
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})
Vue
<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>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Autocomplete } from 'devextreme-react/autocomplete';

const autocompleteData = [
    'Afghanistan',
    'Albania',
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                placeholder="Type country name..."
            />
        );
    }
}

export default App;

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

jQuery
JavaScript
const autocompleteData = [
    { country: "Afghanistan", capital: "Kabul" },
    { country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type country name...',
        valueExpr: 'country'
    });
});
Angular
HTML
TypeScript
<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type country name..."
    valueExpr="country">
</dx-autocomplete>
import { DxAutocompleteModule } from 'devextreme-angular'
// ...
export class AppComponent {
    autocompleteData = [
        { country: "Afghanistan", capital: "Kabul" },
        { country: "Albania", capital: "Tirana" },
        // ...
    ]
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})
Vue
<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>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Autocomplete } from 'devextreme-react/autocomplete';

const autocompleteData = [
    { country: 'Afghanistan', capital: 'Kabul' },
    { country: 'Albania', capital: 'Tirana' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                placeholder="Type country name..."
                valueExpr="country"
            />
        );
    }
}

export default App;

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.

jQuery
JavaScript
const autocompleteData = [
    { country: "Afghanistan", capital: "Kabul" },
    { country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type capital name',
        valueExpr: 'country',
        searchExpr: 'capital'            
    });
});
Angular
HTML
TypeScript
<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type country name..."
    valueExpr="country"
    searchExpr="capital">
</dx-autocomplete>
import { DxAutocompleteModule } from 'devextreme-angular'
// ...
export class AppComponent {
    autocompleteData = [
        { country: "Afghanistan", capital: "Kabul" },
        { country: "Albania", capital: "Tirana" },
        // ...
    ]
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})
Vue
<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>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Autocomplete } from 'devextreme-react/autocomplete';

const autocompleteData = [
    { country: 'Afghanistan', capital: 'Kabul' },
    { country: 'Albania', capital: 'Tirana' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <Autocomplete
                dataSource={autocompleteData}
                placeholder="Type capital name"
                valueExpr="country"
                searchExpr="capital"
            />
        );
    }
}

export default App;
See Also