Search results

Autofill supported with AutoComplete

The 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.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';

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' };

    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'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>