DevExtreme Angular - Configure Search Parameters

The Autocomplete can provide suggestions in two different modes: 'contains' (by default) and 'startswith'. You can use the searchMode option to change the mode.

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

By default, the Autocomplete widget starts providing suggestions once an end user types the first character. To increase the number of characters that triggers suggestions, use the minSearchLength option.

HTML
TypeScript
  • <dx-autocomplete ...
  • [minSearchLength]="3">
  • </dx-autocomplete>
  • import { DxAutocompleteModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })

You can also specify the time interval the widget should wait before providing suggestions. Assign this time interval measured in milliseconds to the searchTimeout option.

HTML
TypeScript
  • <dx-autocomplete ...
  • [searchTimeout]="500">
  • </dx-autocomplete>
  • import { DxAutocompleteModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })
See Also