React

Search results

Filtering Data in React Mention component

25 Jan 2023 / 8 minutes to read

The Mention component has built-in support to filter data items. The filter operation starts as soon as you start typing characters in the mention element.

Limit the minimum filter character

You can control the minimum length of user input to initiate the search action using minLength property. This can be useful if you have a very large list of data. The default value is 0, where suggestion the list opened as soon as the user inputs the mention character.

The remote request does not fetch the search data until the search key contains three characters as shown in the following example.

[Class-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.searchData = new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        });
        this.dataFields = { text: 'ContactName', value: 'CustomerID' };
        this.query = new Query().select(['ContactName', 'CustomerID']).take(7);
        this.minLength = 3;
    }
    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.searchData} target={this.mentionTarget} fields={this.dataFields} query={this.query} minLength={this.minLength}></MentionComponent>
    </div>);
    }
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';

  private searchData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
  });
  private dataFields: Object  = { text: 'ContactName', value: 'CustomerID' };
  private query: Query = new Query().select(['ContactName', 'CustomerID']).take(7);
  private minLength = 3;
  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.searchData} target={this.mentionTarget} fields={this.dataFields} query={this.query} minLength={this.minLength}></MentionComponent>
    </div>
    );
  }
}

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

[Functional-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let searchData = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let dataFields = { text: 'ContactName', value: 'CustomerID' };
    let query = new Query().select(['ContactName', 'CustomerID']).take(7);
    let minLength = 3;
    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={searchData} target={mentionTarget} fields={dataFields} query={query} minLength={minLength}></MentionComponent>
    </div>);
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App() {
  let mentionTarget: string = '#mentionElement';

  let searchData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
  });
  let dataFields: Object  = { text: 'ContactName', value: 'CustomerID' };
  let query: Query = new Query().select(['ContactName', 'CustomerID']).take(7);
  let minLength = 3;

  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={searchData} target={mentionTarget} fields={dataFields} query={query} minLength={minLength}></MentionComponent>
    </div>
  );
  
}

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

Change the filter type

While filtering, you can change the filter type to Contains, StartsWith, or EndsWith in the filterType property. The default filter operator is Contains.

StartsWith - Filter the items that begin with the specified text value.
Contains - Filter the items that contain the specified text value.
EndsWith - Filter the items that end with the specified text value.

[Class-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.searchData = new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        });
        this.query = new Query().select(['ContactName', 'CustomerID']).take(7);
        this.fields = { text: 'ContactName', value: 'CustomerID' };
        this.filterType = 'EndsWith';
    }
    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 target={this.mentionTarget} dataSource={this.searchData} query={this.query} fields={this.fields} filterType={this.filterType}></MentionComponent>
    </div>);
    }
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private searchData: DataManager = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
  });
  private query: Query = new Query().select(['ContactName', 'CustomerID']).take(7);
  private fields: Object = { text: 'ContactName', value: 'CustomerID' };
  private filterType: FilterType = 'EndsWith';
  
  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 target={this.mentionTarget} dataSource={this.searchData} query={this.query} fields={this.fields} filterType={this.filterType} ></MentionComponent>
    </div>
  );
  }
}

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

[Functional-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let searchData = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().select(['ContactName', 'CustomerID']).take(7);
    let fields = { text: 'ContactName', value: 'CustomerID' };
    let filterType = 'EndsWith';
    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 target={mentionTarget} dataSource={searchData} query={query} fields={fields} filterType={filterType}></MentionComponent>
    </div>);
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App () {
  let mentionTarget: string = '#mentionElement';
  let searchData: DataManager = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
  });
  let query: Query = new Query().select(['ContactName', 'CustomerID']).take(7);
  let fields: Object = { text: 'ContactName', value: 'CustomerID' };
  let filterType: FilterType = 'EndsWith';
  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 target={mentionTarget} dataSource={searchData} query={query} fields={fields} filterType={filterType} ></MentionComponent>
    </div>
  );
}

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

Allow spacing between search

While filtering the data in the data source, you can allow the space in the middle of the mention by using the allowSpaces property. If the data source does not match with the mentioned element data, the popup will be hidden on the space key press. The default value of allowSpaces is false.

By default, the allowSpaces property is disabled, and the space ends the mention component search.

[Class-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import { MentionComponent } 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);
        this.mentionTarget = '#mentionElement';
        this.userData = [
            { Name: "Andrew Fuller", ID: "1" },
            { Name: "Anne Dodsworth", ID: "2" },
            { Name: "Janet Leverling", ID: "3" },
            { Name: "Laura Callahan", ID: "4" },
            { Name: "Margaret Peacock", ID: "5" }
        ];
        this.fields = { text: 'Name' };
    }
    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 target={this.mentionTarget} dataSource={this.userData} fields={this.fields} allowSpaces={true}></MentionComponent>
  </div>);
    }
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

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

  private mentionTarget: string = '#mentionElement';
  private userData: {[key: string]: Object}[] = [
{ Name : "Andrew Fuller", ID : "1" },
{ Name : "Anne Dodsworth" , ID : "2" },
{ Name : "Janet Leverling" , ID : "3" },
{ Name : "Laura Callahan" , ID : "4" },
{ Name : "Margaret Peacock" , ID : "5" }
  ];
  private fields: Object = {text:'Name'};
  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 target={this.mentionTarget} dataSource={this.userData} fields={this.fields} allowSpaces={true} ></MentionComponent>
  </div>
);
  }
}

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

[Functional-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let userData = [
        { Name: "Andrew Fuller", ID: "1" },
        { Name: "Anne Dodsworth", ID: "2" },
        { Name: "Janet Leverling", ID: "3" },
        { Name: "Laura Callahan", ID: "4" },
        { Name: "Margaret Peacock", ID: "5" }
    ];
    let fields = { text: 'Name' };
    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 target={mentionTarget} dataSource={userData} fields={fields} allowSpaces={true}></MentionComponent>
  </div>);
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){

  let mentionTarget: string = '#mentionElement';
  let userData: {[key: string]: Object}[] = [
{ Name : "Andrew Fuller", ID : "1" },
{ Name : "Anne Dodsworth" , ID : "2" },
{ Name : "Janet Leverling" , ID : "3" },
{ Name : "Laura Callahan" , ID : "4" },
{ Name : "Margaret Peacock" , ID : "5" }
  ];
  let fields: Object = {text:'Name'};
  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 target={mentionTarget} dataSource={userData} fields={fields} allowSpaces={true} ></MentionComponent>
  </div>
  );
}

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

Customize the suggestion item count

While filtering, you can customize the number of list items to be displayed in the suggestion list by using the suggestionCount property.

[Class-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import { MentionComponent } 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);
        // Defines the target in which the Mention component is rendered.
        this.mentionTarget = '#mentionElement';
        // Defines the array of data.
        this.emailData = [
            { Name: "Selma Rose", EmailId: "selma@gmail.com" },
            { Name: "Maria", EmailId: "maria@gmail.com" },
            { Name: "Russo Kay", EmailId: "russo@gmail.com" },
            { Name: "Robert", EmailId: "robert@gmail.com" },
            { Name: "Camden Kate", EmailId: "camden@gmail.com" },
            { Name: "Garth", EmailId: "garth@gmail.com" },
            { Name: "Andrew James", EmailId: "james@gmail.com" },
            { Name: "Olivia", EmailId: "olivia@gmail.com" },
            { Name: "Sophia", EmailId: "sophia@gmail.com" },
            { Name: "Margaret", EmailId: "margaret@gmail.com" },
            { Name: "Ursula Ann", EmailId: "ursula@gmail.com" },
            { Name: "Laura Grace", EmailId: "laura@gmail.com" },
            { Name: "Albert", EmailId: "albert@gmail.com" },
            { Name: "William", EmailId: "william@gmail.com" }
        ];
        this.fields = { text: 'Name' };
    }
    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 target={this.mentionTarget} dataSource={this.emailData} fields={this.fields} suggestionCount={8}></MentionComponent>
  </div>);
    }
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  // Defines the target in which the Mention component is rendered.
  private mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  private emailData: { [key: string]: Object }[] = [
{ Name: "Selma Rose", EmailId: "selma@gmail.com" },
{ Name: "Maria", EmailId: "maria@gmail.com" },
{ Name: "Russo Kay", EmailId: "russo@gmail.com" },
{ Name: "Robert", EmailId: "robert@gmail.com" },
{ Name: "Camden Kate",EmailId: "camden@gmail.com" },
{ Name: "Garth", EmailId: "garth@gmail.com" },
{ Name: "Andrew James", EmailId: "james@gmail.com" },
{ Name: "Olivia", EmailId: "olivia@gmail.com" },
{ Name: "Sophia", EmailId: "sophia@gmail.com" },
{ Name: "Margaret", EmailId: "margaret@gmail.com" },
{ Name: "Ursula Ann", EmailId: "ursula@gmail.com" },
{ Name: "Laura Grace", EmailId: "laura@gmail.com" },
{ Name: "Albert", EmailId: "albert@gmail.com" },
{ Name: "William", EmailId: "william@gmail.com" }
  ];
  private fields:object = { text: 'Name' };
  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 target={this.mentionTarget} dataSource={this.emailData} fields={this.fields} suggestionCount={8}></MentionComponent>
  </div>
);
  }
}

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

[Functional-component]

Source

Preview

index.jsx

index.html

styles.css

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    // Defines the target in which the Mention component is rendered.
    let mentionTarget = '#mentionElement';
    // Defines the array of data.
    let emailData = [
        { Name: "Selma Rose", EmailId: "selma@gmail.com" },
        { Name: "Maria", EmailId: "maria@gmail.com" },
        { Name: "Russo Kay", EmailId: "russo@gmail.com" },
        { Name: "Robert", EmailId: "robert@gmail.com" },
        { Name: "Camden Kate", EmailId: "camden@gmail.com" },
        { Name: "Garth", EmailId: "garth@gmail.com" },
        { Name: "Andrew James", EmailId: "james@gmail.com" },
        { Name: "Olivia", EmailId: "olivia@gmail.com" },
        { Name: "Sophia", EmailId: "sophia@gmail.com" },
        { Name: "Margaret", EmailId: "margaret@gmail.com" },
        { Name: "Ursula Ann", EmailId: "ursula@gmail.com" },
        { Name: "Laura Grace", EmailId: "laura@gmail.com" },
        { Name: "Albert", EmailId: "albert@gmail.com" },
        { Name: "William", EmailId: "william@gmail.com" }
    ];
    let fields = { text: 'Name' };
    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 target={mentionTarget} dataSource={emailData} fields={fields} suggestionCount={8}></MentionComponent>
  </div>);
}
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.4.38/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>

#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);
}

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App () {
  // Defines the target in which the Mention component is rendered.
  let mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  let emailData: { [key: string]: Object }[] = [
{ Name: "Selma Rose", EmailId: "selma@gmail.com" },
{ Name: "Maria", EmailId: "maria@gmail.com" },
{ Name: "Russo Kay", EmailId: "russo@gmail.com" },
{ Name: "Robert", EmailId: "robert@gmail.com" },
{ Name: "Camden Kate",EmailId: "camden@gmail.com" },
{ Name: "Garth", EmailId: "garth@gmail.com" },
{ Name: "Andrew James", EmailId: "james@gmail.com" },
{ Name: "Olivia", EmailId: "olivia@gmail.com" },
{ Name: "Sophia", EmailId: "sophia@gmail.com" },
{ Name: "Margaret", EmailId: "margaret@gmail.com" },
{ Name: "Ursula Ann", EmailId: "ursula@gmail.com" },
{ Name: "Laura Grace", EmailId: "laura@gmail.com" },
{ Name: "Albert", EmailId: "albert@gmail.com" },
{ Name: "William", EmailId: "william@gmail.com" }
  ];
  let fields:object = { text: 'Name' };
  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 target={mentionTarget} dataSource={emailData} fields={fields} suggestionCount={8}></MentionComponent>
  </div>
  );
}

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

Filtering Data in React Mention component

Limit the minimum filter character

Change the filter type

Allow spacing between search

Customize the suggestion item count

See Also