DevExtreme React - Overview

The Autocomplete widget is a textbox that provides suggestions while a user types into it.

View Demo

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.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Autocomplete } from 'devextreme-react/autocomplete';
  •  
  • const autocompleteData = [
  • 'Afghanistan',
  • 'Albania',
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Autocomplete
  • dataSource={autocompleteData}
  • placeholder="Type country name..."
  • />
  • );
  • }
  • }
  •  
  • export default App;

If your data is an array of objects, use the valueExpr option to specify the field providing suggestions.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Autocomplete } from 'devextreme-react/autocomplete';
  •  
  • const autocompleteData = [
  • { country: 'Afghanistan', capital: 'Kabul' },
  • { country: 'Albania', capital: 'Tirana' },
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Autocomplete
  • dataSource={autocompleteData}
  • placeholder="Type country name..."
  • valueExpr="country"
  • />
  • );
  • }
  • }
  •  
  • export default App;

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.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Autocomplete } from 'devextreme-react/autocomplete';
  •  
  • const autocompleteData = [
  • { country: 'Afghanistan', capital: 'Kabul' },
  • { country: 'Albania', capital: 'Tirana' },
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Autocomplete
  • dataSource={autocompleteData}
  • placeholder="Type capital name"
  • valueExpr="country"
  • searchExpr="capital"
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also