Data Binding in React AutoComplete

4 Sep 202624 minutes to read

The React AutoComplete component loads data from local sources or remote services using the dataSource property. It supports an array of JSON objects or a DataManager instance (which can wrap arrays or remote endpoints such as OData, OData V4, and Web API services), and can parse data formats such as XML, JSON, and JSONP through DataManager adaptors.

The React AutoComplete also supports different kinds of data services such as OData, OData V4, and Web API, and data formats such as XML, JSON, and JSONP with the help of DataManager adaptors.

Field mapping

When binding data to the React AutoComplete, map the appropriate data fields to the component’s fields to ensure proper display and functionality. The following table describes the available field properties:

Fields Type Description
text string Specifies the data field that holds the display text shown for each list item.
value number \| string Specifies the hidden data value mapped to each list item that should contain a unique value.
groupBy string Specifies the category under which the list item has to be grouped.
iconCss string Specifies the icon class of each list item.

When binding complex data to the React AutoComplete, fields should be mapped correctly. Otherwise, the selected item remains undefined. For examples of groupBy and iconCss usage, see the grouping and templates topics.

Binding local data

Local data can be represented in three ways as described below.

Array of strings

The React AutoComplete has support to load array of primitive data such as strings and numbers.

[Class Component]

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 array of string
    sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={this.sportsData} placeholder="Find a game"/>);
    }
}
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 array of string
    private sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];

    public render() {
        return (
              // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" dataSource={this.sportsData} placeholder="Find a game" />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the array of string
    const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" dataSource={sportsData} placeholder="Find a game"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // define the array of string
    const sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];

    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={sportsData} placeholder="Find a game" />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Array of objects

The React AutoComplete can generate its list items through an array of flat data. For this, the appropriate data fields should be mapped to the fields property. When only value is mapped, the same field is used for both display and the selected item value.

In the following example, the game field from flat data is mapped to the value field.

[Class Component]

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"/>);
    }
}
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" />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the JSON of data
    const 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
    const fields = { value: 'game' };
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" dataSource={sportsData} fields={fields} placeholder="Find a game"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {

    // define the JSON of data
    const 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
    const fields: object = { value: 'game' };
        return (
             // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" dataSource={sportsData} fields={fields} placeholder="Find a game" />
        );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Array of complex objects

The React AutoComplete can render list items from an array of nested data. For this, the appropriate data fields should be mapped to the fields property using dotted notation.

In the following example, the Country.Name field from nested data is mapped to the value field.

[Class Component]

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
    countriesData = [
        { Country: { Name: 'Australia' }, Code: { Id: 'AU' } },
        { Country: { Name: 'Bermuda' }, Code: { Id: 'BM' } },
        { Country: { Name: 'Canada' }, Code: { Id: 'CA' } },
        { Country: { Name: 'Cameroon' }, Code: { Id: 'CM' } },
        { Country: { Name: 'Denmark' }, Code: { Id: 'DK' } },
        { Country: { Name: 'France' }, Code: { Id: 'FR' } },
        { Country: { Name: 'Finland' }, Code: { Id: 'FI' } },
        { Country: { Name: 'Germany' }, Code: { Id: 'DE' } },
        { Country: { Name: 'Greenland' }, Code: { Id: 'GL' } },
        { Country: { Name: 'Hong Kong' }, Code: { Id: 'HK' } },
        { Country: { Name: 'India' }, Code: { Id: 'IN' } },
        { Country: { Name: 'Italy' }, Code: { Id: 'IT' } },
        { Country: { Name: 'Japan' }, Code: { Id: 'JP' } },
        { Country: { Name: 'Mexico' }, Code: { Id: 'MX' } },
        { Country: { Name: 'Norway' }, Code: { Id: 'NO' } },
        { Country: { Name: 'Poland' }, Code: { Id: 'PL' } },
        { Country: { Name: 'Switzerland' }, Code: { Id: 'CH' } },
        { Country: { Name: 'United Kingdom' }, Code: { Id: 'GB' } },
        { Country: { Name: 'United States' }, Code: { Id: 'US' } }
    ];
    // maps the appropriate column to fields property
    fields = { value: 'Country.Name' };
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={this.countriesData} fields={this.fields} placeholder="Find a country"/>);
    }
}
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 countriesData: { [key: string]: Object }[] = [
        { Country: { Name: 'Australia' }, Code: { Id: 'AU' }},
        { Country: { Name: 'Bermuda' },Code: { Id: 'BM' }},
        { Country:{ Name: 'Canada'}, Code:{ Id: 'CA'} },
        { Country:{Name: 'Cameroon'}, Code:{ Id: 'CM'} },
        { Country:{Name: 'Denmark'}, Code:{ Id: 'DK' }},
        { Country:{Name: 'France'}, Code: { Id:'FR'} },
        { Country:{Name: 'Finland'}, Code:  { Id:'FI'} },
        { Country:{Name: 'Germany'}, Code: { Id:'DE'} },
        { Country:{Name: 'Greenland'}, Code:{ Id: 'GL' }},
        { Country:{Name: 'Hong Kong'}, Code: { Id:'HK'} },
        { Country:{Name: 'India'}, Code:{ Id: 'IN'} },
        { Country:{ Name: 'Italy'}, Code: { Id:'IT'} },
        { Country:{ Name: 'Japan'}, Code: { Id: 'JP'} },
        { Country:{Name: 'Mexico'}, Code: { Id: 'MX' }},
        { Country:{Name: 'Norway'}, Code: { Id: 'NO'} },
        { Country:{Name: 'Poland'}, Code: { Id: 'PL' }},
        { Country:{Name: 'Switzerland'}, Code: { Id: 'CH'} },
        { Country:{Name: 'United Kingdom'},Code: { Id: 'GB'} },
        { Country:{Name: 'United States'}, Code: { Id: 'US'} }
    ];

    // maps the appropriate column to fields property
    private fields: object = { value: 'Country.Name' };

    public render() {
        return (
             // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" dataSource={this.countriesData} fields={this.fields} placeholder="Find a country" />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the JSON of data
    const countriesData = [
        { Country: { Name: 'Australia' }, Code: { Id: 'AU' } },
        { Country: { Name: 'Bermuda' }, Code: { Id: 'BM' } },
        { Country: { Name: 'Canada' }, Code: { Id: 'CA' } },
        { Country: { Name: 'Cameroon' }, Code: { Id: 'CM' } },
        { Country: { Name: 'Denmark' }, Code: { Id: 'DK' } },
        { Country: { Name: 'France' }, Code: { Id: 'FR' } },
        { Country: { Name: 'Finland' }, Code: { Id: 'FI' } },
        { Country: { Name: 'Germany' }, Code: { Id: 'DE' } },
        { Country: { Name: 'Greenland' }, Code: { Id: 'GL' } },
        { Country: { Name: 'Hong Kong' }, Code: { Id: 'HK' } },
        { Country: { Name: 'India' }, Code: { Id: 'IN' } },
        { Country: { Name: 'Italy' }, Code: { Id: 'IT' } },
        { Country: { Name: 'Japan' }, Code: { Id: 'JP' } },
        { Country: { Name: 'Mexico' }, Code: { Id: 'MX' } },
        { Country: { Name: 'Norway' }, Code: { Id: 'NO' } },
        { Country: { Name: 'Poland' }, Code: { Id: 'PL' } },
        { Country: { Name: 'Switzerland' }, Code: { Id: 'CH' } },
        { Country: { Name: 'United Kingdom' }, Code: { Id: 'GB' } },
        { Country: { Name: 'United States' }, Code: { Id: 'US' } }
    ];
    // maps the appropriate column to fields property
    const fields = { value: 'Country.Name' };
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" dataSource={countriesData} fields={fields} placeholder="Find a country"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {

    // define the JSON of data
    const countriesData: { [key: string]: Object }[] = [
        { Country:{Name: 'Australia' }, Code: { Id: 'AU' }},
        { Country:{Name: 'Bermuda' },Code: { Id: 'BM' }},
        { Country:{Name: 'Canada'}, Code:{ Id: 'CA'} },
        { Country:{Name: 'Cameroon'}, Code:{ Id: 'CM'} },
        { Country:{Name: 'Denmark'}, Code:{ Id: 'DK' }},
        { Country:{Name: 'France'}, Code: { Id:'FR'} },
        { Country:{Name: 'Finland'}, Code:  { Id:'FI'} },
        { Country:{Name: 'Germany'}, Code: { Id:'DE'} },
        { Country:{Name: 'Greenland'}, Code:{ Id: 'GL' }},
        { Country:{Name: 'Hong Kong'}, Code: { Id:'HK'} },
        { Country:{Name: 'India'}, Code:{ Id: 'IN'} },
        { Country:{Name: 'Italy'}, Code: { Id:'IT'} },
        { Country:{Name: 'Japan'}, Code: { Id: 'JP'} },
        { Country:{Name: 'Mexico'}, Code: { Id: 'MX' }},
        { Country:{Name: 'Norway'}, Code: { Id: 'NO'} },
        { Country:{Name: 'Poland'}, Code: { Id: 'PL' }},
        { Country:{Name: 'Switzerland'}, Code: { Id: 'CH'} },
        { Country:{Name: 'United Kingdom'},Code: { Id: 'GB'} },
        { Country:{Name: 'United States'}, Code: { Id: 'US'} }
    ];

    // maps the appropriate column to fields property
    const fields: object = { value: 'Country.Name' };

    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={countriesData} fields={fields} placeholder="Find a country" />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Binding remote data

The React AutoComplete supports retrieving data from remote services with the help of the DataManager component. The Query property is used to fetch data from the database and bind it to the React AutoComplete.

The below sample uses the OData V4 service endpoint and the ODataV4Adaptor to fetch the first 6 customers from the Customers table of the Northwind data service.

[Class Component]

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
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 {
    // bind the DataManager instance to dataSource property
    customerData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    // maps the appropriate column to fields property
    fields = { value: 'ContactName' };
    // sort the resulted items
    sortOrder = 'Ascending';
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.customerData} fields={this.fields} sortOrder={this.sortOrder} placeholder="Find a customer"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
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<{}, {}> {
    // bind the DataManager instance to dataSource property
    private customerData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    private query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    // maps the appropriate column to fields property
    private fields: object = { value: 'ContactName' };
    // sort the resulted items
    private sortOrder: SortOrder = 'Ascending';

    public render() {
        return (
              // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.customerData}
            fields={this.fields} sortOrder={this.sortOrder} placeholder="Find a customer"/>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // bind the DataManager instance to dataSource property
    const customerData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    const query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    // maps the appropriate column to fields property
    const fields = { value: 'ContactName' };
    // sort the resulted items
    const sortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" query={query} dataSource={customerData} fields={fields} sortOrder={sortOrder} placeholder="Find a customer"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // bind the DataManager instance to dataSource property
    const customerData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    const query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    // maps the appropriate column to fields property
    const fields: object = { value: 'ContactName' };
    // sort the resulted items
    const sortOrder: SortOrder = 'Ascending';

    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={query} dataSource={customerData}
            fields={fields} sortOrder={sortOrder} placeholder="Find a customer"/>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

For binding to other service types, see OData, OData V4, and Web API using the corresponding DataManager adaptors.

See also