JavaScript/jQuery Autocomplete - Overview
The Autocomplete UI component 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 UI component requires only a dataSource to be specified. In addition, you can specify the placeholder to be displayed when the Autocomplete is empty.
- <div id="autocompleteContainer"></div>
- const autocompleteData = [
- "Afghanistan",
- "Albania",
- // ...
- ];
- $(function() {
- $("#autocompleteContainer").dxAutocomplete({
- dataSource: autocompleteData,
- placeholder: 'Type country name...'
- });
- });
If your data is an array of objects, use the valueExpr property to specify the field providing suggestions.
- const autocompleteData = [
- { country: "Afghanistan", capital: "Kabul" },
- { country: "Albania", capital: "Tirana" },
- // ...
- ];
- $(function() {
- $("#autocompleteContainer").dxAutocomplete({
- dataSource: autocompleteData,
- placeholder: 'Type country name...',
- valueExpr: 'country'
- });
- });
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 property and the field to be searched - to the searchExpr property. Note that searchExpr also accepts arrays in case you need several fields to search in.
- const autocompleteData = [
- { country: "Afghanistan", capital: "Kabul" },
- { country: "Albania", capital: "Tirana" },
- // ...
- ];
- $(function() {
- $("#autocompleteContainer").dxAutocomplete({
- dataSource: autocompleteData,
- placeholder: 'Type capital name',
- valueExpr: 'country',
- searchExpr: 'capital'
- });
- });
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.