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 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>