React Autocomplete - Configure Search Parameters

The Autocomplete can provide suggestions in two different modes: 'contains' (by default) and 'startswith'. You can use the searchMode property to change the mode.

  • 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}
  • valueExpr="country"
  • searchMode="startswith"
  • />
  • );
  • }
  • }
  •  
  • export default App;

By default, the Autocomplete UI component starts providing suggestions once an end user types the first character. To increase the number of characters that triggers suggestions, use the minSearchLength property.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Autocomplete } from 'devextreme-react/autocomplete';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Autocomplete minSearchLength={3}/>
  • );
  • }
  • }
  •  
  • export default App;

You can also specify the time interval the UI component should wait before providing suggestions. Assign this time interval measured in milliseconds to the searchTimeout property.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Autocomplete } from 'devextreme-react/autocomplete';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Autocomplete searchTimeout={500}/>
  • );
  • }
  • }
  •  
  • export default App;
See Also