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
If you have technical questions, please create a support ticket in the DevExpress Support Center.