Mention
Vue Bootstrap 5 Mention plugin
Responsive Mention plugin built with the latest Bootstrap 5 and Vue 3. Mention is an autocomplete dropdown menu for your search inputs. It is useful for tagging users or topics.
Note: Read the API tab to find all available options and advanced customization
Basic example
Type @ and use up/down arrows, home/end keys to navigate. Click enter or use mouse click to choose item
<template>
<MDBMention :items="items1" queryBy="username">
<MDBInput label="Type @ to open mentions list" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
{ name: "Diane", username: "didiane92", image: "" },
{ name: "Max", username: "maximus", image: "" },
{ name: "Andrew", username: "andrew00", image: "" },
{ name: "Rebecca", username: "becky", image: "" },
{ name: "Thomas", username: "tommy16", image: "" },
{ name: "Alexander", username: "xander", image: "" },
{ name: "Jessica", username: "jessyJ12", image: "" },
];
return {
items1,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
{ name: "Diane", username: "didiane92", image: "" },
{ name: "Max", username: "maximus", image: "" },
{ name: "Andrew", username: "andrew00", image: "" },
{ name: "Rebecca", username: "becky", image: "" },
{ name: "Thomas", username: "tommy16", image: "" },
{ name: "Alexander", username: "xander", image: "" },
{ name: "Jessica", username: "jessyJ12", image: "" },
];
</script>
Data from HTML
Mention component can be reached without setup initialization.
In such case list items should have proper data-mdb- attributes and list should
have mention-data-items class.
<template>
<MDBMention queryBy="username">
<MDBInput
label="Type @ to open mentions list"
/>
<ul class="mention-data-items">
<li
data-mdb-name="James"
data-mdb-username="james123"
data-mdb-img="..."
></li>
<li
data-mdb-name="John"
data-mdb-username="john322"
data-mdb-img="..."
></li>
<li
data-mdb-name="Mary"
data-mdb-username="maryx"
data-mdb-img="..."
></li>
</ul>
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
</script>
Toggle show list on trigger
Showing all items on trigger key is turned on by default. Set
showListOnTrigger prop to false to turn it off and show items only
after user search input.
<template>
<MDBMention
:items="items2"
queryBy="username"
:showListOnTrigger="false"
>
<MDBInput
label="Type @ and start searching items"
/>
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
return {
items2,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
</script>
Placement example
Use placement prop to change placement of the component
Position of the component will be flipped to opposite side when no free space is available. Once enough space is detected, component will flip back to its original placement
<template>
<MDBMention :items="items2" queryBy="username" placement="top">
<MDBInput label="Top placement example" />
</MDBMention>
<MDBMention :items="items2" queryBy="username" placement="right">
<MDBInput label="Right placement example" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
return {
items2,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
</script>
Textarea example
Mention works also with textarea
<template>
<MDBMention :items="items2" queryBy="username">
<MDBTextarea label="Textarea example" rows="2" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBTextarea } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBTextarea,
},
setup() {
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
return {
items2,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBTextarea } from "mdb-vue-ui-kit";
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
</script>
Customize search conditions
Use queryBy prop to change search conditions
<template>
<MDBMention :items="items2" queryBy="username">
<MDBInput label="Search by username" />
</MDBMention>
<MDBMention :items="items2" queryBy="name">
<MDBInput label="Search by user" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
return {
items2,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
</script>
Customize no results text
Set noResultsText to a text of your choice to change the message for no results
found.
<template>
<MDBMention
:items="items2"
queryBy="username"
noResultsText="No results found"
>
<MDBInput label="No results text" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
return {
items2,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
</script>
Trigger sign
Use trigger prop to change search triggering sign
<template>
<MDBMention :items="items2" queryBy="username" trigger="#">
<MDBInput label="Trigger sign" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
return {
items2,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items2 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
</script>
Show image
Use showImage prop to show images in the mentions list
<template>
<MDBMention :items="items3" queryBy="username" showImage>
<MDBInput label="Show image" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items3 = [
{ name: 'James', username: 'james123', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.jpg' },
{ name: 'John', username: 'john322', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.jpg' },
{ name: 'Mary', username: 'maryx', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.jpg' },
];
return {
items3
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items3 = [
{ name: 'James', username: 'james123', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.jpg' },
{ name: 'John', username: 'john322', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.jpg' },
{ name: 'Mary', username: 'maryx', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.jpg' },
];
</script>
Visible items
Use visibleItems prop to change the number of options that will be displayed in
the select dropdown without scrolling.
<template>
<MDBMention :items="items1" queryBy="username" :visibleItems="3">
<MDBInput label="Visible items" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
{ name: "Diane", username: "didiane92", image: "" },
{ name: "Max", username: "maximus", image: "" },
{ name: "Andrew", username: "andrew00", image: "" },
{ name: "Rebecca", username: "becky", image: "" },
{ name: "Thomas", username: "tommy16", image: "" },
{ name: "Alexander", username: "xander", image: "" },
{ name: "Jessica", username: "jessyJ12", image: "" },
];
return {
items1
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
{ name: "Diane", username: "didiane92", image: "" },
{ name: "Max", username: "maximus", image: "" },
{ name: "Andrew", username: "andrew00", image: "" },
{ name: "Rebecca", username: "becky", image: "" },
{ name: "Thomas", username: "tommy16", image: "" },
{ name: "Alexander", username: "xander", image: "" },
{ name: "Jessica", username: "jessyJ12", image: "" },
];
</script>
Multiple lists
Assign multiple mentions to the element by wrapping an input by any number of Mention elements.
<template>
<MDBMention :items="items1" trigger="@" queryBy="username">
<MDBMention :items="items4" trigger="#" queryBy="productName">
<MDBMention :items="items5" trigger="$" queryBy="id">
<MDBMention :items="items6" trigger="%" queryBy="city">
<MDBInput label="Triggers: @, #, $, %" style="width: 22rem" />
</MDBMention>
</MDBMention>
</MDBMention>
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
{ name: "Diane", username: "didiane92", image: "" },
{ name: "Max", username: "maximus", image: "" },
{ name: "Andrew", username: "andrew00", image: "" },
{ name: "Rebecca", username: "becky", image: "" },
{ name: "Thomas", username: "tommy16", image: "" },
{ name: "Alexander", username: "xander", image: "" },
{ name: "Jessica", username: "jessyJ12", image: "" },
];
const items4 = [
{ productName: "fish" },
{ productName: "meat" },
{ productName: "vegetables" },
];
const items5 = [{ id: "1234" }, { id: "4955" }, { id: "3455" }];
const items6 = [
{ city: "Warsaw" },
{ city: "Berlin" },
{ city: "Amsterdam" },
];
return {
items1,
items4,
items5,
items6,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
{ name: "Diane", username: "didiane92", image: "" },
{ name: "Max", username: "maximus", image: "" },
{ name: "Andrew", username: "andrew00", image: "" },
{ name: "Rebecca", username: "becky", image: "" },
{ name: "Thomas", username: "tommy16", image: "" },
{ name: "Alexander", username: "xander", image: "" },
{ name: "Jessica", username: "jessyJ12", image: "" },
];
const items4 = [
{ productName: "fish" },
{ productName: "meat" },
{ productName: "vegetables" },
];
const items5 = [{ id: "1234" }, { id: "4955" }, { id: "3455" }];
const items6 = [
{ city: "Warsaw" },
{ city: "Berlin" },
{ city: "Amsterdam" },
];
</script>
Asynchronous data
<template>
<MDBMention :items="items7" queryBy="username" class="me-2">
<MDBInput label="Async data success" />
</MDBMention>
<MDBMention
:items="items8"
queryBy="username"
noItemsText="There was problem reaching your data from the server"
>
<MDBInput label="Async data error" />
</MDBMention>
</template>
<script>
import { ref } from "vue";
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items7 = ref([]);
const items8 = [];
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => (items7.value = data));
return {
items7,
items8,
};
},
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
const items7 = ref([]);
const items8 = [];
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => (items7.value = data));
</script>
Mention - API
Import
<script>
import { MDBMention } from "mdb-vue-mention";
</script>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items
|
Array | |
Defines mention items. |
itemHeight
|
Number | 35 |
Defines mention item height. |
noItemsText
|
String | "" |
Defines no items text. |
noResultsText
|
String | "No results found" |
Defines no results text. |
placement
|
String | "bottom" |
Defines dropdown default position. |
queryBy
|
String | "name" |
Defines query rule. |
showImage
|
Boolean | false |
Enables images in dropdown. |
showListOnTrigger
|
Boolean | true |
Enables showing list right after trigger typing. |
tag
|
String | "div" |
Defines wrapper tag. |
trigger
|
String | "@" |
Defines default trigger. |
visibleItems
|
Number | 5 |
Defines max number of visible items in the list. |
Methods
| Name | Description |
|---|---|
open |
Manually opens a mention |
close |
Manually closes a mention |
<template>
<MDBMention ref="mentionRef" :items="items1" queryBy="username">
<MDBInput label="Type @ to open mentions list" />
</MDBMention>
</template>
<script>
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
import { onMounted, ref } from "vue";
export default {
name: "App",
components: {
MDBMention,
MDBInput,
},
setup() {
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
const mentionRef = ref(null);
onMounted(() => mentionRef.value?.open());
return {
items1,
mentionRef,
};
},
};
</script>
<script setup lang="ts">
import { MDBMention } from "mdb-vue-mention";
import { MDBInput } from "mdb-vue-ui-kit";
import { onMounted, ref } from "vue";
const items1 = [
{ name: "James", username: "james123", image: "" },
{ name: "John", username: "john322", image: "" },
{ name: "Mary", username: "maryx", image: "" },
];
const mentionRef = ref<InstanceType<typeof MDBMention> | null>(null);
onMounted(() => mentionRef.value?.open());
</script>
Events
| Name | Description |
|---|---|
open
|
This event fires immediately when the mention is opened. |
close
|
This event fires immediately when the mention is closed. |
select
|
This event fires immediately when the list item is selected. I returns selected item queryBy value. |
change
|
This event fires immediately when the mention reference element value changes. |
<template>
<MDBMention @open="doSomething" >...</MDBMention >
</template>