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.
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.
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.
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.
Textarea example
Mention works also with textarea.
Customize search conditions
Use queryBy option to change search conditions.
Customize no results text
Customize the message for 'no results found' by setting the noResultsText to a text of your choice.
Trigger sign
Use trigger option to change search triggering sign.
Show image
Use showImg option to show images in the mentions list.
Visible items
Use visibleItems option to change the number of options that will be displayed in the select dropdown without scrolling.
Multiple lists
Assign multiple mentions to the element by giving each mention different trigger key.
Asynchronous data
Use getAsync option to use asynchronous data loading.