Autocomplete

A textbox widget that supports autocompletion.

Type: Object

The dxAutocomplete widget is a textbox that suggests ways to complete the text being typed. Suggestions are loaded from an array specified via the dataSource configuration option. You can specify a simple array or an array of objects as the widget data source.

JavaScript
var autocompleteData = [
    { country: "Australia", capital: "Canberra" },
    { country: "Brasilia", capital: "Brasilia" },
    { country: "Congo", capital: "Brazzaville" },
    { country: "Egypt", capital: "Kair" },
    { country: "Estonia", capital: "Talinn" },
    { country: "France", capital: "Paris" },
    { country: "Germany", capital: "Berlin" },
    { country: "Italy", capital: "Rome" },
    { country: "Netherlands", capital: "Amsterdam" },
    { country: "Russian Federation", capital: "Moscow" },
    { country: "Ukraine", capital: "Kiev" },
    { country: "United kingdom", capital: "London" },
    { country: "USA", capital: "Washington" }
];

To create the dxAutocomplete widget, add a div element with dxAutocomplete Knockout binding within the body of the required view. Create a template element within the widget element to specify the markup for the items shown by the widget.

HTML
<div data-bind="dxAutocomplete: { dataSource: autocompleteData, displayExpr: 'country' }">
    <div data-options="dxTemplate: {name: 'item'}">
        <b data-bind="text: country"></b><br />
        <span style="color:grey;">Capital: <span data-bind="text: capital"></span></span>
    </div>
</div>

See the Customize Widget Item Appearance topic to learn how to adjust the appearance of widget items.

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery

Configuration

An object defining configuration options for the dxAutocomplete widget.

Methods

This section describes members used to manipulate the object.