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.

HTML
JavaScript
<div id="autocompleteContainer"></div>
var autocompleteData = [
    "Afghanistan",
    "Albania",
    // . . .
];
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        placeholder: 'Type country name'
    });
});

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

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

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        valueExpr: 'country',
        placeholder: 'Type country name'
    });
});

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.

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

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        valueExpr: 'country',
        searchExpr: 'capital',
        placeholder: 'Type capital name'
    });
});
See Also