UI Widgets 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
 <div class="autocomplete" data-bind="dxAutocomplete: {
  dataSource: autocompleteData,
  displayExpr: 'country',
  placeholder: 'Type country name'
}">
   <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>
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" }
];
body{
  text-align: center;
}
.autocomplete{
  margin: 10px;
}

Configuration

An object defining configuration options for the dxAutocomplete widget.

Methods

This section describes members used to manipulate the object.