Mention suggestions
Static markup for each state. These examples use style="position: static; --mention-suggestions-max-block: none" so they sit in the page. In an application the root is fixed near the caret. There is no script on this page. See the mention suggestions manual for a working editor.
Ready
Results with an active option, duplicate names told apart by their supplied detail, an unavailable person and a person without an avatar. The count is in the status region, out of sight.
- Ada OkaforFinance circle
- Bo LindqvistKitchen
- Sam RiveraKitchen
- Sam RiveraFinance circle
- Di Ng
5 people found
Loading
The first search for a new @. The status message is visible.
Searching people…
Stale rows while loading
Earlier rows stay visible but dimmed while a new search loads. None is active, and Enter closes the list.
- Ada OkaforFinance circle
- Bo LindqvistKitchen
Searching people…
Empty
No person matches.
No matching people
Error
The search failed. Typing again retries.
People could not be loaded. Keep typing to try again.
Long names, wrapped
The default. Names break at spaces and hyphens, then inside long words.
- Maria-Fernanda Oyelaran-Castellanos de la VegaFestival submissions working group
- WolfeschlegelsteinhausenbergerdorffArchive
2 people found
Long names, truncated
Add truncate to the name and detail. The full text stays in the page.
- Maria-Fernanda Oyelaran-Castellanos de la VegaFestival submissions working group
- WolfeschlegelsteinhausenbergerdorffArchive
2 people found
Closed
Mounted but closed. The root is clipped out of sight, the listbox is hidden and the status is empty. Nothing is visible below this sentence.