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
JavaScript
var autocompleteData = [
    { country: "Afghanistan", capital: "Kabul" },
    { country: "Albania", capital: "Tirana" },
    // ...
];

$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        dataSource: autocompleteData,
        valueExpr: 'country',
        searchMode: 'startswith'
    });
});
Angular
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.

jQuery
JavaScript
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        // ...
        minSearchLength: 3
    });
});
Angular
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.

jQuery
JavaScript
$(function() {
    $("#autocompleteContainer").dxAutocomplete({
        // ...
        searchTimeout: 500
    });
});
Angular
HTML
TypeScript
<dx-autocomplete ...
    [searchTimeout]="500">
</dx-autocomplete>
import { DxAutocompleteModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})
See Also