Mention
The Mention control displays a list of items from which a user can select or tag when a defined key @ is pressed in a textarea.
Default Behavior
Demonstrates the default behavior of the Mention control.
The Mention control displays a list of items from which a user can select or tag when a defined key @ is pressed in a textarea.
new ac.dropdowns.Mention(
{
dataStore: people,
fields: { text: "name" },
placeholder: "Type @ to see a list of users"
},
"#cntlMention"
);<div id="cntlMention"></div>const people = [
{ name: "Alice Andi", id: "list-01" },
{ name: "Pip Willis", id: "list-02" },
{ name: "Rhett Nyla", id: "list-03" },
{ name: "Colby Toria", id: "list-04" },
{ name: "Harriette Dona", id: "list-05" },
{ name: "Rolf Carver", id: "list-06" },
{ name: "Melba Skyla", id: "list-07" },
{ name: "Molly Trent", id: "list-08" },
{ name: "Kaydence Mikayla", id: "list-09" },
{ name: "Lizette Kaylynn", id: "list-10" }
];