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

Basic example

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

Edit in sandbox 
        
            
        <div class="form-outline">
        <input type="text" id="basic-example" class="form-control mention" />
        <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 reached without JavaScript initialization.

Items data has to be passed as an HTML list element with a data-mdb-targetattribute pointing IDof input/textarea element. List items should have proper data-mdb-attributes.

Edit in sandbox 
        
            
        <div class="form-outline">
          <input
            type="text"
            id="html-data"
            class="form-control mention"
          />
          <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. Set showListOnTrigger option to false to turn it off and show items only after user search input

Edit in sandbox 
        
            
        <div class="form-outline">
        <input type="text" id="all-items" class="form-control mention" />
        <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

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

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

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

        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

Edit in sandbox 
        
            
          <div class="form-outline">
            <textarea id="textarea-example" class="form-control mention"></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 no results text

Set noResultsText to a text of your choice to change the message for no results found

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="no-results" class="form-control mention" />
          <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

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="trigger" class="form-control mention" />
          <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

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="show-image" class="form-control mention" />
          <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.

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="visible-items" class="form-control mention" />
          <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

Edit in sandbox 
        
            
            <div class="form-outline">
              <input type="text" id="multiple-lists" class="form-control mention" />
              <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

Edit in sandbox 
        
            
        <div class="form-outline me-2">
          <input type="text" id="async-success" class="form-control mention" />
          <label class="form-label" for="async-success">Async data success</label>
        </div>
        <div class="form-outline me-2">
          <input type="text" id="async-error" class="form-control mention" />
          <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

Usage

Via HTML

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="html-data" class="form-control mention"/>
          <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

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="basic-example" class="form-control mention" />
          <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.

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="basic-example" class="form-control mention" />
          <label class="form-label" for="basic-example">Basic example</label>
        </div>
      
        
    
        
            
        $('#basic-example').mention(options);

Options

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 'name' 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 'true' Displays user image on the list
visibleItems Number 5 The maximum number of items which are visible in the mention dropdown without scrolling.

Methods

Name Description Example
getInstance Retuns 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()
Edit in sandbox 
        
            
        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.
select.mdb.mention This event fires immediately when the list item is selected
change.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
Edit in sandbox 
        
            
        document.addEventListener('open.mdb.mention', (e) => {
          // do something...
        })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import Mention from 'mdb-mention';