Search results

Templates in React Mention component

02 Feb 2023 / 6 minutes to read

The Mention has been provided with several options to customize each suggestion list item, display item, and data loading indication.

Item template

The content of each list item in Mention can be customized using itemTemplate property.

In the following sample, each list item is split into two columns to display relevant data using itemTemplate.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.dataSource = new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        });
        this.query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
        this.fields = { text: "FirstName", value: "EmployeeID" };
    }
    itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  private query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  private fields:Object  = { text: "FirstName", value: "EmployeeID" };
  private itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    let fields = { text: "FirstName", value: "EmployeeID" };
    function itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App (){

  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  let query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  let fields:Object  = { text: "FirstName", value: "EmployeeID" };
  function itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }

    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>
    );
}

ReactDOM.render(<App />, document.getElementById('sample'));

Display template

You can customize the mentioned value’s display appearance using the displayTemplate property.

In the following sample, the selected value is displayed as a combined text of both FirstName and City in the mention element, which is separated by a hyphen.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.dataSource = new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        });
        this.query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
        this.fields = { text: "FirstName", value: "EmployeeID" };
    }
    itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    displayTemplate(data) {
        return (<React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>);
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  private query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  private fields:Object  = { text: "FirstName", value: "EmployeeID" };
  private itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }
  private displayTemplate(data: any): JSX.Element {
    return (
      <React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>
      );
  }
  
  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    let fields = { text: "FirstName", value: "EmployeeID" };
    function itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    function displayTemplate(data) {
        return (<React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>);
    }
    return (<div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user'></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} displayTemplate={displayTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
        </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App() {

  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  let query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  let fields:Object  = { text: "FirstName", value: "EmployeeID" };
  function itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }
  function displayTemplate(data: any): JSX.Element {
    return (
      <React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>
    );
  }

    return (
        <div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user'></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} displayTemplate={displayTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('sample'));

No records template

You can show the custom design of the popup list content when no data is found and no matches are found on search with the help of noRecordsTemplate property.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.dataSource = [];
        this.noRecordsTemplate = "<span class='norecord'> NO DATA AVAILABLE</span>";
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} noRecordsTemplate={this.noRecordsTemplate}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {

private mentionTarget: string = '#mentionElement';
private dataSource :[] = [];
private noRecordsTemplate: string = "<span class='norecord'> NO DATA AVAILABLE</span>";

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} noRecordsTemplate={this.noRecordsTemplate} ></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = [];
    let noRecordsTemplate = "<span class='norecord'> NO DATA AVAILABLE</span>";
    return (<div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user'></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} noRecordsTemplate={noRecordsTemplate}></MentionComponent>
        </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';

function App (){

  let mentionTarget: string = '#mentionElement';
  let dataSource :[] = [];
  let noRecordsTemplate: string = "<span class='norecord'> NO DATA AVAILABLE</span>";
  return (
        <div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user' ></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} noRecordsTemplate={noRecordsTemplate} ></MentionComponent>
        </div>
  );
}

ReactDOM.render(<App />, document.getElementById('sample'));

Spinner template

Display the customized waiting spinner, when data fetching takes time to load in the suggestion list by using the spinnerTemplate property.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.dataSource = new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        });
        this.query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
        this.fields = { text: "FirstName", value: "EmployeeID" };
    }
    spinnerTemplate() {
        return (<React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>);
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} sortOrder={'Ascending'} spinnerTemplate={this.spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  private query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  private fields:Object = { text: "FirstName", value: "EmployeeID" };
  
  private spinnerTemplate(): JSX.Element {
    return (
      <React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>
    );
  }
  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} sortOrder={'Ascending'} spinnerTemplate={this.spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    let fields = { text: "FirstName", value: "EmployeeID" };
    function spinnerTemplate() {
        return (<React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>);
    }
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} sortOrder={'Ascending'} spinnerTemplate={spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
.city{
  right: 15px;
  position: absolute;
}
.spinner_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 85px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App () {

  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  let query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  let fields:Object = { text: "FirstName", value: "EmployeeID" };
  
  function spinnerTemplate(): JSX.Element {
    return (
      <React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>
    );
  }

  return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} sortOrder={'Ascending'} spinnerTemplate={spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>
  );

}

ReactDOM.render(<App />, document.getElementById('sample'));