DevExtreme React - 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.
jQuery
var autocompleteData = [ { country: "Afghanistan", capital: "Kabul" }, { country: "Albania", capital: "Tirana" }, // ... ]; $(function() { $("#autocompleteContainer").dxAutocomplete({ dataSource: autocompleteData, valueExpr: 'country', searchMode: 'startswith' }); });
Angular
<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.
jQuery
$(function() { $("#autocompleteContainer").dxAutocomplete({ // ... minSearchLength: 3 }); });
Angular
<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.
jQuery
$(function() { $("#autocompleteContainer").dxAutocomplete({ // ... searchTimeout: 500 }); });
Angular
<dx-autocomplete ... [searchTimeout]="500"> </dx-autocomplete>
import { DxAutocompleteModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxAutocompleteModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.