DevExtreme Angular - 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
TypeScript
  • <dx-autocomplete
  • [dataSource]="autocompleteData"
  • placeholder="Type country name...">
  • </dx-autocomplete>
  • import { DxAutocompleteModule } from 'devextreme-angular'
  • // ...
  • export class AppComponent {
  • autocompleteData = [
  • "Afghanistan",
  • "Albania",
  • // ...
  • ]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })

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

HTML
TypeScript
  • <dx-autocomplete
  • [dataSource]="autocompleteData"
  • placeholder="Type country name..."
  • valueExpr="country">
  • </dx-autocomplete>
  • import { DxAutocompleteModule } from 'devextreme-angular'
  • // ...
  • export class AppComponent {
  • autocompleteData = [
  • { country: "Afghanistan", capital: "Kabul" },
  • { country: "Albania", capital: "Tirana" },
  • // ...
  • ]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })

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.

HTML
TypeScript
  • <dx-autocomplete
  • [dataSource]="autocompleteData"
  • placeholder="Type country name..."
  • valueExpr="country"
  • searchExpr="capital">
  • </dx-autocomplete>
  • import { DxAutocompleteModule } from 'devextreme-angular'
  • // ...
  • export class AppComponent {
  • autocompleteData = [
  • { country: "Afghanistan", capital: "Kabul" },
  • { country: "Albania", capital: "Tirana" },
  • // ...
  • ]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })
See Also