Syncfusion AI Assistant

How can I help you?

Filtering data in React Mention component

21 Feb 202624 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

Control the minimum number of characters required to initiate search using the minLength property. This is useful for large datasets. The default value is 0, where the suggestion list opens immediately when the mention character is typed.

The following example delays the remote request until three characters are entered:

[Class-component]

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

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

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

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

Enable spaces within mention text by setting the allowSpaces property. When disabled, pressing space closes the popup if the text doesn’t match the data source. The default value is false.

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

[Class-component]

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 {
    mentionTarget = '#mentionElement';
    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" }
    ];
    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'));
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]

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

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.
    mentionTarget = '#mentionElement';
    // Defines the array of data.
    emailData = [
        { Name: "Selma Rose", EmailId: "[email protected]" },
        { Name: "Maria", EmailId: "[email protected]" },
        { Name: "Russo Kay", EmailId: "[email protected]" },
        { Name: "Robert", EmailId: "[email protected]" },
        { Name: "Camden Kate", EmailId: "[email protected]" },
        { Name: "Garth", EmailId: "[email protected]" },
        { Name: "Andrew James", EmailId: "[email protected]" },
        { Name: "Olivia", EmailId: "[email protected]" },
        { Name: "Sophia", EmailId: "[email protected]" },
        { Name: "Margaret", EmailId: "[email protected]" },
        { Name: "Ursula Ann", EmailId: "[email protected]" },
        { Name: "Laura Grace", EmailId: "[email protected]" },
        { Name: "Albert", EmailId: "[email protected]" },
        { Name: "William", EmailId: "[email protected]" }
    ];
    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'));
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: "[email protected]" },
    { Name: "Maria", EmailId: "[email protected]" },
    { Name: "Russo Kay", EmailId: "[email protected]" },
    { Name: "Robert", EmailId: "[email protected]" },
    { Name: "Camden Kate",EmailId: "[email protected]" },
    { Name: "Garth", EmailId: "[email protected]" },
    { Name: "Andrew James", EmailId: "[email protected]" },
    { Name: "Olivia", EmailId: "[email protected]" },
    { Name: "Sophia", EmailId: "[email protected]" },
    { Name: "Margaret", EmailId: "[email protected]" },
    { Name: "Ursula Ann", EmailId: "[email protected]" },
    { Name: "Laura Grace", EmailId: "[email protected]" },
    { Name: "Albert", EmailId: "[email protected]" },
    { Name: "William", EmailId: "[email protected]" }
  ];
  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]

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: "[email protected]" },
        { Name: "Maria", EmailId: "[email protected]" },
        { Name: "Russo Kay", EmailId: "[email protected]" },
        { Name: "Robert", EmailId: "[email protected]" },
        { Name: "Camden Kate", EmailId: "[email protected]" },
        { Name: "Garth", EmailId: "[email protected]" },
        { Name: "Andrew James", EmailId: "[email protected]" },
        { Name: "Olivia", EmailId: "[email protected]" },
        { Name: "Sophia", EmailId: "[email protected]" },
        { Name: "Margaret", EmailId: "[email protected]" },
        { Name: "Ursula Ann", EmailId: "[email protected]" },
        { Name: "Laura Grace", EmailId: "[email protected]" },
        { Name: "Albert", EmailId: "[email protected]" },
        { Name: "William", EmailId: "[email protected]" }
    ];
    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'));
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: "[email protected]" },
    { Name: "Maria", EmailId: "[email protected]" },
    { Name: "Russo Kay", EmailId: "[email protected]" },
    { Name: "Robert", EmailId: "[email protected]" },
    { Name: "Camden Kate",EmailId: "[email protected]" },
    { Name: "Garth", EmailId: "[email protected]" },
    { Name: "Andrew James", EmailId: "[email protected]" },
    { Name: "Olivia", EmailId: "[email protected]" },
    { Name: "Sophia", EmailId: "[email protected]" },
    { Name: "Margaret", EmailId: "[email protected]" },
    { Name: "Ursula Ann", EmailId: "[email protected]" },
    { Name: "Laura Grace", EmailId: "[email protected]" },
    { Name: "Albert", EmailId: "[email protected]" },
    { Name: "William", EmailId: "[email protected]" }
  ];
  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'));

See Also