DevExtreme React - Overview

The Autocomplete widget 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 widget 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>
var 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
    ],
    // ...
})

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

jQuery
JavaScript
var 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
    ],
    // ...
})

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.

jQuery
JavaScript
var 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
    ],
    // ...
})
See Also