DevExtreme jQuery - 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
Feedback