Mention

Bootstrap 5 Mention plugin

Responsive Mention plugin built with the latest Bootstrap 5. 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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

Type @ and use up/down arrows, home/end keys to navigate. Click enter or use mouse click to choose item.

Type @ to open mentions list

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
        <input type="text" id="basic-example" class="form-control" data-mdb-mention-init />
        <label class="form-label" for="basic-example">Type @ to open mentions list</label>
      </div>

        
            
        const basicExample = document.getElementById('basic-example');
        new Mention(basicExample, {
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });

Data from HTML

Mention component can be initiated without the need for any JavaScript code.

The items data has to be passed as an HTML list element with a data-mdb-target attribute pointing to the ID of the input/textarea element. Additionally, the list items should have appropriate data-mdb- attributes.

Type @ to open mentions list

Show code Edit in sandbox

HTML

        
            
        <div data-mdb-input-init class="form-outline">
          <input
            type="text"
            id="html-data"
            class="form-control"
            data-mdb-mention-init
          />
          <label class="form-label" for="html-data">Type @ to open mentions list</label>
        </div>
        <ul class="mention-data-items" data-mdb-target="html-data">
          <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>

Toggle show list on trigger

Showing all items on trigger key is turned on by default. To disable this behavior and show items only after the user provides input, set the showListOnTrigger option to false.

Type @ and start searching items

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
        <input type="text" id="all-items" class="form-control" data-mdb-mention-init />
        <label class="form-label" for="all-items">Type @ and start searching items</label>
      </div>

        
            
        const allItems = document.getElementById('all-items');
        new Mention(allItems, {
          showListOnTrigger: false,
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });

Placement example

Use placement options to change placement of the component.

The component's position will automatically flip to the opposite side when no free space is available. Once enough space is detected, the component will flip back to its original placement.

Top placement example

Right placement example

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="top" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="top">Top placement example</label>
        </div>
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="right" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="right">Right placement example</label>
        </div>

        
            
        const topPlacement = document.getElementById('top');
        const rightPlacement = document.getElementById('right');

        new Mention(topPlacement, {
          placement: 'top',
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });
        new Mention(rightPlacement, {
          placement: 'right',
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });

Textarea example

Mention works also with textarea.

Textarea example

Show code Edit in sandbox

HTML
JavaScript

        
            
          <div data-mdb-input-init class="form-outline">
            <textarea id="textarea-example" class="form-control" data-mdb-mention-init ></textarea>
            <label class="form-label" for="textarea-example">Textarea example</label>
          </div>

        
            
          const textarea = document.getElementById('textarea-example');
          new Mention(textarea, {
            items: [
              { name: 'James', username: 'james123', image: '' },
              { name: 'John', username: 'john322', image: '' },
              { name: 'Mary', username: 'maryx', image: '' },
            ],
          });

Customize search conditions

Use queryBy option to change search conditions.

Search by username

Search by user

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="query-by-username" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="query-by-username">Search by username</label>
        </div>
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="query-by-name" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="query-by-name">Search by user</label>
        </div>

        
            
        const queryByUsername = document.getElementById('query-by-username')
        const queryByName = document.getElementById('query-by-name')
        new Mention(queryByUsername, {
          queryBy: 'username', // - this is default value
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });
        new Mention(queryByName, {
          queryBy: 'name',
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });

Customize no results text

Customize the message for 'no results found' by setting the noResultsText to a text of your choice.

No results text

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="no-results" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="no-results">No results text</label>
        </div>

        
            
        const noResults = document.getElementById('no-results');
        new Mention(noResults, {
          noResultsText: 'No results found', // - this is default value
          items: [],
        });

Trigger sign

Use trigger option to change search triggering sign.

Trigger sign

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="trigger" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="trigger">Trigger sign</label>
        </div>

        
            
        const trigger = document.getElementById('trigger');
        new Mention(trigger, {
          trigger: '#',
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });

Show image

Use showImg option to show images in the mentions list.

Show image

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="show-image" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="show-image">Show image</label>
        </div>

        
            
        const showImage = document.getElementById('show-image');
        new Mention(showImage, {
          showImg: true,
          items: [
            { name: 'James', username: 'james123', image: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/43.webp' },
            { name: 'John', username: 'john322', image: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/43.webp' },
            { name: 'Mary', username: 'maryx', image: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/43.webp' },
          ],
        });

Visible items

Use visibleItems option to change the number of options that will be displayed in the select dropdown without scrolling.

Visible items

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline">
          <input type="text" id="visible-items" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="visible-items">Visible items</label>
        </div>

        
            
        const visibleItems = document.getElementById('visible-items');
        new Mention(visibleItems, {
          visibleItems: 3,
          items: [
            { 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: '' },
          ],
        });

Multiple lists

Assign multiple mentions to the element by giving each mention different trigger key.

Triggers: @, #, $, %

Show code Edit in sandbox

HTML
JavaScript

        
            
            <div data-mdb-input-init class="form-outline">
              <input type="text" id="multiple-lists" class="form-control" data-mdb-mention-init />
              <label class="form-label" for="multiple-lists">Triggers: @, #, $, %</label>
            </div>

        
            
          const multipleLists = document.getElementById('multiple-lists');
          new Mention(multipleLists, {
            multiInstance: true,
            items: [
              { 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: '' },
            ],
          });
          new Mention(multipleLists, {
            multiInstance: true,
            trigger: '#',
            queryBy: 'productName',
            items: [
              { productName: 'fish' },
              { productName: 'meat' },
              { productName: 'vegetables' },
            ],
          });
          new Mention(multipleLists, {
            multiInstance: true,
            trigger: '$',
            queryBy: 'id',
            items: [
              { id: '1234' },
              { id: '4955' },
              { id: '3455' },
            ],
          });
          new Mention(multipleLists, {
            multiInstance: true,
            trigger: '%',
            queryBy: 'city',
            items: [
              { city: 'Warsaw' },
              { city: 'Berlin' },
              { city: 'Amsterdam' },
            ],
          });

Asynchronous data

Use getAsync option to use asynchronous data loading.

Async data success

Async data error

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div data-mdb-input-init class="form-outline me-2">
          <input type="text" id="async-success" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="async-success">Async data success</label>
        </div>
        <div data-mdb-input-init class="form-outline me-2">
          <input type="text" id="async-error" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="async-error">Async data error</label>
        </div>

        
            
        const asyncSuccess = document.getElementById('async-success');
        new Mention(asyncSuccess, {
          getAsync: 'https://jsonplaceholder.typicode.com/users'
        });
        const asyncError = document.getElementById('async-error');
        new Mention(asyncError, {
          getAsync: 'https://invalid-link.com'
        });

Mention - API

Import

Show code Edit in sandbox

JavaScript
SCSS

        
            
          import Mention from 'mdb-mention';

        
            
          @import '~mdb-mention/css/mention.min.css';

Usage

Via data attributes

Using the Mention plugin doesn't require any additional JavaScript code - simply add data-mdb-mention-init attribute to input tag and use other data attributes to set all options.

Show code Edit in sandbox

HTML

        
            
        <div class="form-outline" data-mdb-input-init >
          <input type="text" id="html-data" class="form-control" data-mdb-mention-init />
          <label class="form-label" for="html-data">Data from HTML list</label>
        </div>
        <ul class="mention-data-mdb-items" data-mdb-target="html-data">
          <li data-name="James" data-mdb-username="james123" data-mdb-img="..."></li>
          <li data-name="John" data-mdb-username="john322" data-mdb-img="..."></li>
          <li data-name="Mary" data-mdb-username="maryx" data-mdb-img="..."></li>
        </ul>

Via JavaScript

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div class="form-outline">
          <input type="text" id="basic-example" class="form-control" />
          <label class="form-label" for="basic-example">Basic example</label>
        </div>

        
            
        const options = { 
          items: [
            { 
              name: 'James',
              username: 'james123',
              image: '' 
            },
            { 
              name: 'John',
              username: 'john322',
              image: ''
            },
          ]
        } 
        const myMention = new Mention(document.getElementById('basic-example'), options);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Show code Edit in sandbox

HTML
jQuery

        
            
        <div class="form-outline">
          <input type="text" id="basic-example" class="form-control" />
          <label class="form-label" for="basic-example">Basic example</label>
        </div>

        
            
        $(document).ready(() => { 
          $('#basic-example').mention(options);
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-trigger="".

Name	Type	Default	Description
`items`	Array	`[]`	An array of items to display on the list. Each user should contain the required `username` key value. Other key values are optional e.g. `user`, `image`
`noResultsText`	String	`'No results found'`	The text that will be displayed when no item is found after using mention filter
`trigger`	String	`'@'`	Changes trigger sign that allows to search for items
`queryBy`	String	`'username'`	Changes the key by which list will be rendered and filtered
`placement`	String	`'bottom'`	Changes placement of the component relative to the reference element
`showListOnTrigger`	Boolean	`true`	Specifies whether whole list has to be opened before search input
`showImg`	Boolean	`false`	Displays user image on the list
`visibleItems`	Number	`5`	The maximum number of items which are visible in the mention dropdown without scrolling
`multiInstance`	Boolean	`false`	Allow setting multiple instances of the mention plugin on the same element for different triggers
`getAsync`	String	`''`	Allow setting an endpoint for asynchronous data loading

Methods

Name	Description	Example
`getInstance`	Returns instance of element	`mdb.Mention.getInstance(element)`
`open`	Manually opens a mention	`instance.open()`
`close`	Manually close a mention	`instance.close()`
`dispose`	Disposes a mention instance	`instance.dispose()`

Show code Edit in sandbox

JavaScript

        
            
        const mentionEl = document.getElementById('mentionEl');
        const mention = new Mention(mentionEl, {
          items: [
            { name: 'James', username: 'james123', image: '' },
            { name: 'John', username: 'john322', image: '' },
            { name: 'Mary', username: 'maryx', image: '' },
          ],
        });
        mention.open()

Events

Name	Description
`open.mdb.mention`	This event fires immediately when the mention is opened.
`close.mdb.mention`	This event fires immediately when the mention is closed.
`itemSelected.mdb.mention`	This event fires immediately after the list item is selected.
`valueChange.mdb.mention`	This event fires immediately when the mention reference element value changes.
`fetchError.mdb.mention`	This event fires immediately when getting asynchronous data fails.

Show code Edit in sandbox

JavaScript

        
            
        document.addEventListener('open.mdb.mention', (e) => {
          // do something...
        })

Mention

Bootstrap 5 Mention plugin

Basic example

Data from HTML

Toggle show list on trigger

Placement example

Textarea example

Customize search conditions

Customize no results text

Trigger sign

Show image

Visible items

Multiple lists

Asynchronous data

Related resources

Mention - API

Import

Usage

Via data attributes

Via JavaScript

Via jQuery

Options

Methods

Events