Getting started with JavaScript Mention control

08 May 2023 / 4 minutes to read

This section explains how to create a Mention, and configure its available functionalities in TypeScript using Essential JS 2 quickstart seed repository.

Dependencies

The following list of dependencies are required to use the Mention control in your application.

|-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons

Setup your development environment

To get started with the Mention control, clone Essential JS 2 quickstart, and install the npm packages using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The project is preconfigured with common settings (src/styles/styles.css, system.config.js) to start all the Essential JS 2 controls.

Refer to the Mention control dependencies in system.config.js configuration file.

[src/system.config.js]

System.config({
paths: {
    'npm:': './node_modules/',
    'syncfusion:': 'npm:@syncfusion/'
},
map: {
    app: 'app',
    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-data":"syncfusion:ej2-data/dist/ej2-data.umd.min.js",
    "@syncfusion/ej2-inputs":"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
    "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
    "@syncfusion/ej2-lists":"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-navigations":"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
    "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js"
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

System.import('app.ts').catch(console.error.bind(console)).then(function () {
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
});

Adding the Style sheet to the application

To render Mention control, need to import dropdowns and its dependent controls styles as given below in styles.css.

@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";

To know about individual control CSS, please refer to Individual control theme files section.

Adding the Mention control to the application

Add the HTML div tag with the id attribute as mentionElement to your index.html file.

[src/index.html]

<!DOCTYPE html>
<html lang="en">


<head>
<title>Essential JS 2 Mention control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />

<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.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>
</body>
</html>

Import the Mention control in your app.ts file and initialize it with the #mentionElement.

[src/app/app.ts]

import { Mention } from '@syncfusion/ej2-dropdowns';

// initialize Mention control
let mentionObject: Mention = new Mention({});

// render initialized Mention
mentionObject.appendTo('#mentionElement');

Binding the data source

After initialization, populate the Mention with data using the dataSource property. Here, an array of string values is passed to the Mention control.

import { Mention } from '@syncfusion/ej2-dropdowns';

// define the array of data
let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

// initialize Mention control
let mentionObject: Mention = new Mention({
//set the data to dataSource property
dataSource: userData
});

// render initialized Mention
mentionObject.appendTo('#mentionElement');

Run the application

Run the application in the browser using the following command:

npm run start

The following example, shows a basic Mention control.

Source

Preview

app.ts

index.html

import { Mention } from '@syncfusion/ej2-dropdowns';

// defined the array of data
let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

// initialize Mention control
let mentionObject: Mention = new Mention({
//set the data to dataSource property
dataSource: userData
});

// render initialized Mention
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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>

</html>

Display mention character

By using the showMentionChar property, the text content can be displayed along with the mention character. You can customize the mention character by using the mentionChar property in the Mention control.

By default, the mentionChar is @ and the showMentionChar property is disabled.

The following example, displays the text content along with the mention character configured as #.

Source

Preview

app.ts

index.html

import { Mention } from '@syncfusion/ej2-dropdowns';

// defined the array of data
let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

// initialize Mention control
let mentionObject: Mention = new Mention({
mentionChar: '#',
//set the data to dataSource property
dataSource: userData,
showMentionChar: true
});

// render initialized Mention
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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>

</html>

Contents

Dependencies
Setup your development environment
Adding the Style sheet to the application
Adding the Mention control to the application
Binding the data source
Run the application
Display mention character

Contents

Dependencies
Setup your development environment
Adding the Style sheet to the application
Adding the Mention control to the application
Binding the data source
Run the application
Display mention character

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!