Show the list items with icons in React AutoComplete component

12 May 2022 / 1 minute to read

You can render icons to the list items by mapping the iconCss field. This iconCss field create a span in the list item with mapped class name to allow styling as per your need.

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

Source

Preview

index.jsx

index.html

styles.css

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 {
    constructor() {
        super(...arguments);
        // define the array of data
        this.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.
        this.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'));

<!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/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="./styles.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="width:250px; margin: 20px auto 0;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

.e-list-icon {
    line-height: 1.3;
    padding-right: 10px;
    text-indent: 5px;
}

.asc-sort:before {
    content: '\ea91';
    font-family: 'e-icons';  
    font-size: 20px;

}
.dsc-sort:before {
    content: '\ea98';
    font-family: 'e-icons';   
    font-size: 20px;
}
.filter:before {
    content: '\ea77';
    font-family: 'e-icons';  
    font-size: 20px;
    opacity: 0.78;
}
.clear:before {
    content: '\ec0f';
    font-family: 'e-icons';  
    font-size: 20px;
}

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