Filtering data in EJ2 JavaScript Mention control

2 May 202313 minutes to read

The Mention control 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 the minLength property. This can be useful if you have a very large list of data. The default value is 0, where the suggestion list opens 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.

index.js
index.html
//initiates the component
var mentionObject = new ej.dropdowns.Mention({
  //bind the data manager instance to dataSource property
  dataSource: new ej.data.DataManager({
          url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
          adaptor: new ej.data.ODataV4Adaptor(),
          crossDomain: true
  }),
  //bind the Query instance to query property
  query: new ej.data.Query().select(['ContactName', 'CustomerID']).take(7),
  //map the appropriate columns to fields property
  fields: { text: 'ContactName', value: 'CustomerID' },
  minLength: 3
});

//render the component
mentionObject.appendTo('#mentionElement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Mention</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="width:200px;">
        <!--element which is the Mention target to list the suggestions-->
        <label style="font-size: 15px; font-weight: 600;">Comments</label>
        <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

index.js
index.html
//initiates the component
var mentionObject = new ej.dropdowns.Mention({
  //bind the data manager instance to dataSource property
  dataSource: new ej.data.DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ej.data.ODataV4Adaptor(),
        crossDomain: true
  }),
  //bind the Query instance to query property
  query: new ej.data.Query().select(['ContactName', 'CustomerID']).take(7),
  //map the appropriate columns to fields property
  fields: { text: 'ContactName', value: 'CustomerID' },
  filterType: 'EndsWith'
});

//render the component
mentionObject.appendTo('#mentionElement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Mention</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="width:200px;">
        <!--element which is the Mention target to list the suggestions-->
        <label style="font-size: 15px; font-weight: 600;">Comments</label>
        <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Allow spacing between search

While filtering the data in the data source, you can allow the space in the middle of the mention 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 the allowSpaces is false.

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

index.js
index.html
var employeesData = [
    { 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' }
];
// initialize Mention component
var mentionObj = new ej.dropdowns.Mention({
  dataSource: employeesData,
  fields: { text: 'Name', value: 'Id' },
  allowSpaces: true,
});
mentionObj.appendTo('#mentionElement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Mention</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="width:200px;">
        <!--element which is the Mention target to list the suggestions-->
        <label style="font-size: 15px; font-weight: 600;">Comments</label>
        <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customize the suggestion item count

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

index.js
index.html
var 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" }
];
// initialize Mention component
var mentionObj = new ej.dropdowns.Mention({
  dataSource: emailData,
  fields: { text: 'Name' },
  suggestionCount: 8
});
mentionObj.appendTo('#mentionElement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Mention</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="width:200px;">
        <!--element which is the Mention target to list the suggestions-->
        <label style="font-size: 15px; font-weight: 600;">Comments</label>
        <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Filtering data in EJ2 JavaScript Mention control

Limit the minimum filter character

Change the filter type

Allow spacing between search

Customize the suggestion item count

See also