Mention
Mention - Bootstrap 5 & Material Design components
Responsive Mention plugin built with the latest Bootstrap 5. Mention is an autocomplete dropdown menu for your search inputs. It is useful for tagging items 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
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
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
Textarea example
Mention works also with textarea
Customize search conditions
Use queryBy option to change search conditions
Customize no results text
Set noResultsText to a text of your choice to change the message for no results found
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
Async
Use disableFilter option to disable filtering by directive and use asynchronous data loading