Configuration

An object defining configuration options for the dxAutocomplete widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery

dataSource

A data source used to fetch data for autocomplete.

Type: Object
Default Value: null

Refer to the Data-Bound Application tutorial for more information.

Show Example:
jQuery

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the component at runtime.

Show Example:
jQuery

displayExpr

Specifies the name of the data source item field whose value is displayed by the widget.

Type: String
Default Value: "this"

If the Autocomplete item is a simple object holding a value (string, numeric, Boolean, etc.), assign 'this' to the displayExpr option. If the item is a plain object item, assign the required field name to the option.

Show Example:
jQuery

height

Specifies the height of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the height of the widget in pixels;
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit");
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; }).

itemRender

A function used to render autocomplete items.

Type: function
Default Value: null

The rendering function should have the following parameters and return an HTML string, element, or jQuery object representing the rendered item.

  • itemData - the object representing the rendered item
  • itemIndex - the index of the rendered item
  • itemElement - the container element containing the rendered item

This option is useful if you work with widgets using jQuery. If you use Knockout, use the itemTemplate option to specify the appearance of autocomplete items.

Show Example:
jQuery

itemTemplate

The name of the template used to render autocomplete items or the function returning the template name.

Type: String|function
Default Value: "item"

For more information on templates, see the dxTemplate description.

This option is only applicable if you use Knockout. Otherwise use the itemRender option to specify the appearance of autocomplete items.

Show Example:
jQuery

minSearchLength

The minimum number of characters that must be entered into the search box to begin a search.

Type: Number
Default Value: 1

placeholder

The text displayed by the widget when the widget value is empty.

Type: String
Default Value: ""

searchTimeout

Specifies the time period in milliseconds before a search is executed.

Type: Number
Default Value: 0

value

Specifies the current value displayed by autocomplete.

Type: String
Default Value: ""

Show Example:
jQuery

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the widget width in pixels;
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit");
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; }).