#Suggestions as you type

addSuggester offers things in a list under the caret, as the writer types after a trigger character at the start of a word: @ for people, # for tags, : for emoji…

this.addSuggester({
  id: 'tags',
  trigger: '#',
  find: (query) =>
    this.tags
      .filter((tag) => tag.startsWith(query.toLowerCase()))
      .map((tag) => ({ label: tag, insert: `#${tag}`, detail: 'tag' })),
})

How it behaves:

• What find gets: what's been typed after the trigger so far, and is asked again as the writer types, after a pause of 60 ms. Keep it quick, and keep what it looks through ready beforehand. It may be async; an answer that comes after the writer has typed on is dropped.
• What it returns: suggestions with a label, an optional detail shown beside it, and an optional insert. The chosen suggestion's insert (its label, if none) replaces the trigger and what followed it.
• The keys: up and down choose, Enter or Tab takes one, and Escape puts the list away until the writer moves on.
• Limits: at most 12 suggestions are shown, from every suggester with the same trigger. A trigger in the middle of a word (e@mail) offers nothing.

It works sandboxed too.