React 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.

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