DevExtreme jQuery/JS - 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,
  • placeholder: 'Type country name...',
  • valueExpr: 'country'
  • });
  • });

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,
  • placeholder: 'Type capital name',
  • valueExpr: 'country',
  • searchExpr: 'capital'
  • });
  • });
See Also