How to show list items with icons in React AutoComplete

4 Sep 20264 minutes to read

You can add icons to the list items by mapping the iconCss field. The iconCss field renders a span with the mapped class name in each list item for styling. For example, set the iconCss field within the fields mapping, such as fields=, where icon is the data field that holds the icon CSS class for each item. The mapped class must be defined in your application’s CSS (for example, in index.css or App.css) with the appropriate icon styles, such as a font-icon or a background image, so the span renders the intended icon.

In the following sample, icon classes are mapped using the iconCss field.

index.jsx

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 data
    sortFormatData = [
        { Class: 'asc-sort', Type: 'Sort A to Z', Id: '1' },
        { Class: 'dsc-sort', Type: 'Sort Z to A ', Id: '2' },
        { Class: 'filter', Type: 'Filter', Id: '3' },
        { Class: 'clear', Type: 'Clear', Id: '4' }
    ];
    // map the icon column to iconCSS field.
    fields = { value: 'Type', iconCss: 'Class' };
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="" dataSource={this.sortFormatData} fields={this.fields} placeholder="Find a format"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

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 data
    private sortFormatData: { [key: string]: Object }[] = [
        { Class: 'asc-sort', Type: 'Sort A to Z', Id: '1' },
        { Class: 'dsc-sort', Type: 'Sort Z to A ', Id: '2' },
        { Class: 'filter', Type: 'Filter', Id: '3' },
        { Class: 'clear', Type: 'Clear', Id: '4' }
    ];

    // map the icon column to iconCSS field.
    private fields: object = { value: 'Type', iconCss: 'Class' };

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

Each list item displays an icon based on the class mapped through the iconCss field.