Search results

Templates in Vue Mention component

02 Feb 2023 / 5 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.

Source
Preview
app.vue
Copied to clipboard
<template>
        <div id="app">
            <label id="comment" >Comments</label>
            <div id="mentionElement" placeholder = "Type @ and tag user"></div>
            <ejs-mention id='defaultMention' :target='target' :dataSource='dataSource' sortOrder='Descending' :fields='fields' :itemTemplate="'iTemplate'" :query='query' popupWidth='250px'>
            <template v-slot:iTemplate="{data}">
                <span><span>{{data.FirstName}}</span><span class ='city'>{{data.City}}</span></span>
            </template>
            </ejs-mention>
        </div>
    </template>

    <script>
    import Vue from "vue";
    import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
    import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
    Vue.use(MentionPlugin);

    export default {
        data: function() {
            return {
                dataSource: new DataManager({
                url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
                adaptor: new ODataV4Adaptor,
                crossDomain: true
                }),
                query: new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(6),  
                fields: { text: 'FirstName', value: 'EmployeeID' },
                target: "#mentionElement"
            };
        }
    }
    </script>

    <style>

    @import "../node_modules/@syncfusion/ej2-base/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-list/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";

   #app {
        color: #008cff;
        height: 40px;
        left: 15%;
        position: absolute;
        top: 10%;
        width: 30%;
    }

    #comment {
        font-size: 15px;
        font-weight: 600;
    }

    #mentionElement {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }
    .city {
        right: 15px;
        position: absolute;
    }
    </style>

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.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div id="app">
        <label id="comment" >Comments</label>
        <div id="mentionElement" placeholder = "Type @ and tag user"></div>
        <ejs-mention id='defaultMention' :target='target' :dataSource='dataSource' :fields='fields' :itemTemplate="'iTemplate'" :displayTemplate="'dTemplate'" :query='query' sortOrder='Descending' popupWidth='250px'>
        <template v-slot:iTemplate="{data}">
        <span><span>{{data.FirstName}}</span><span class ='city'>{{data.City}}</span></span>
        </template>
        <template v-slot:dTemplate="{data}">
        <span>{{data.FirstName}} - {{data.City}}</span>
        </template>
        </ejs-mention>
    </div>
</template>

<script>
import Vue from "vue";
import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
Vue.use(MentionPlugin);

export default {
    data: function() {
        return {
            dataSource: new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
            }),
            query: new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(6),  
            fields: { text: 'FirstName', value: 'EmployeeID' },
            target: "#mentionElement"
        };
    }
}
</script>

<style>

    @import "../node_modules/@syncfusion/ej2-base/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-list/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";

    #app {
        color: #008cff;
        height: 40px;
        left: 15%;
        position: absolute;
        top: 10%;
        width: 30%;
    }

    #comment {
        font-size: 15px;
        font-weight: 600;
    }

    #mentionElement {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }

    .city {
        right: 15px;
        position: absolute;
    }
</style>

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.

In the following sample, popup list content displays the notification of no data available.

Source
Preview
app.vue
Copied to clipboard
<template>
        <div id="app">
            <label id="comment" >Comments</label>
            <div id="mentionElement" placeholder = "Type @ and tag user"></div>
            <ejs-mention id='defaultMention' :target='target' :dataSource=[]  :noRecordsTemplate='noRecordsTemplate' ></ejs-mention>
        </div>
</template>
<script>
import Vue from "vue";
import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(MentionPlugin);

export default {
    data: function() {
        return {
            noRecordsTemplate:"<span class='norecord'> NO DATA AVAILABLE</span>",
            target: "#mentionElement"
        };
    }
}
</script>

<style>

    @import "../node_modules/@syncfusion/ej2-base/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-list/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";

    #app {
        color: #008cff;
        height: 40px;
        left: 15%;
        position: absolute;
        top: 10%;
        width: 30%;
    }

    #comment {
        font-size: 15px;
        font-weight: 600;
    }

    #mentionElement {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
        color: #555;
    }
</style>

Spinner template

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

In the following sample, customized spinner is shown while fetching the data from the service.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div id="app">
        <label id="comment" >Comments</label>
        <div id="mentionElement" placeholder = "Type @ and tag user"></div>
        <ejs-mention id='defaultMention' :target='target' :dataSource='dataSource' sortOrder='Ascending' :fields='fields' :query='query' :spinnerTemplate="'sTemplate'" popupWidth='250px' >
        <template v-slot:sTemplate>
            <div class="spinner_loader"></div>
        </template>
        </ejs-mention>
    </div>
</template>
<script>
import Vue from "vue";
import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
Vue.use(MentionPlugin);

export default {
    data: function() {
        return {
            dataSource: new DataManager({
                url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
                adaptor: new ODataV4Adaptor,
                crossDomain: true
            }),
            query: new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(26),
            fields: { text: 'FirstName', value: 'EmployeeID' },
            target: "#mentionElement"
        };
    }
}
</script>

<style>

    @import "../node_modules/@syncfusion/ej2-base/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-list/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";

    #app {
        color: #008cff;
        height: 40px;
        left: 15%;
        position: absolute;
        top: 10%;
        width: 30%;
    }

    #comment {
        font-size: 15px;
        font-weight: 600;
    }

    #mentionElement {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }

    .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;
    }
</style>