Autofill in React Auto complete component
2 Feb 20234 minutes to read
The React AutoComplete supports the autofill behavior with the help of autofill
property. Whenever you change the input value and press the down key, the AutoComplete will autocomplete your data by matching the typed character. Suppose, if no matches found then, AutoComplete doesn’t suggest any item.
In the below sample, showcase that how to work autofill
with AutoComplete.
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the JSON of data
sportsData = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' }
];
// maps the appropriate column to fields property
fields = { value: 'Game' };
render() {
return (
// specifies the tag for render the AutoComplete component
<AutoCompleteComponent id="atcelement" dataSource={this.sportsData} fields={this.fields} placeholder="Find a game" autofill={true}/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'Game1', Game: 'Badminton' },
{ Id: 'Game2', Game: 'Basketball' },
{ Id: 'Game3', Game: 'Cricket' },
{ Id: 'Game4', Game: 'Football' },
{ Id: 'Game5', Game: 'Golf' },
{ Id: 'Game6', Game: 'Hockey' },
{ Id: 'Game7', Game: 'Rugby' },
{ Id: 'Game8', Game: 'Snooker' }
];
// maps the appropriate column to fields property
private fields: object = { value: 'Game' };
public render() {
return (
// specifies the tag for render the AutoComplete component
<AutoCompleteComponent id="atcelement" dataSource={this.sportsData} fields={this.fields} placeholder="Find a game" autofill={true} />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));