DevExtreme jQuery - Overview
The Autocomplete widget is a textbox that provides suggestions while a user types into it.
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.
jQuery
<div id="autocompleteContainer"></div>
var autocompleteData = [
"Afghanistan",
"Albania",
// ...
];
$(function() {
$("#autocompleteContainer").dxAutocomplete({
dataSource: autocompleteData,
placeholder: 'Type country name...'
});
});Angular
<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.
jQuery
var autocompleteData = [
{ country: "Afghanistan", capital: "Kabul" },
{ country: "Albania", capital: "Tirana" },
// ...
];
$(function() {
$("#autocompleteContainer").dxAutocomplete({
dataSource: autocompleteData,
placeholder: 'Type country name...',
valueExpr: 'country'
});
});Angular
<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.
jQuery
var autocompleteData = [
{ country: "Afghanistan", capital: "Kabul" },
{ country: "Albania", capital: "Tirana" },
// ...
];
$(function() {
$("#autocompleteContainer").dxAutocomplete({
dataSource: autocompleteData,
placeholder: 'Type capital name',
valueExpr: 'country',
searchExpr: 'capital'
});
});Angular
<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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Autocomplete - Customize Item Appearance
- Autocomplete - Configure Search Parameters
- Autocomplete API Reference