<suggest-elemental>

<div class="field">
  <label for="jump">Jump to</label>
  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
    <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/>
  </svg>
  <input type="search" id="jump" autocomplete="off" placeholder="type, or press ↓">
  <suggest-elemental for="jump">
    <ul>
      <li><a href="accordion.html" target="_blank">Accordion</a></li>
      <li><a href="combobox.html" target="_blank">Combobox</a></li>
      <li><a href="disclosure.html" target="_blank">Disclosure</a></li>
      <li><a href="menu.html" target="_blank">Menu</a></li>
      <li><a href="modal.html" target="_blank">Modal</a></li>
    </ul>
  </suggest-elemental>
</div>

/* the panel is absolutely positioned, so it adds no height to anything — the bottom margin
   is what keeps it inside this preview, and is not part of the pattern. A margin and not
   padding: the panel's containing block is this box, so padding here would push the panel
   down with it */
.field { position: relative; display: grid; max-width: 22rem; margin-block-end: 12rem; }

/* the icon and the field share one grid cell rather than being positioned over it, so the
   glyph is centred on whatever height the control turns out to have */
.field svg, .field input { grid-row: 2; grid-column: 1; }
.field svg {
  place-self: center start;
  /* the two share a cell, and the field is painted after — so the glyph needs lifting out
     from under its background, and taking out of the way of the click that focuses it */
  z-index: 1;
  margin-inline-start: 0.75rem;
  fill: color-mix(in srgb, CanvasText 55%, transparent);
  pointer-events: none;
}

/* the look of the control is the page's: the theme draws the panel and nothing else, on the
   reasoning that a field is what a design system already owns */
.field input {
  padding: 0.5rem 0.75rem;
  padding-inline-start: 2.25rem;
  font: inherit;
  color: CanvasText;
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 30%, transparent);
  border-radius: 0.375rem;
}
.field input:focus-visible { outline: 2px solid CanvasText; outline-offset: 1px; }
.field label { margin-block-end: 0.35rem; font-size: 0.875rem; }

/* clear of the field rather than welded to it — the panel is a separate surface */
.field suggest-elemental { margin-block-start: 0.25rem; }

// the element never sees the query: it is handed a list, and this is the page deciding what
// goes in it. `replaceChildren` moves the original rows, so there is no markup to build and
// nothing to escape
const field = document.getElementById('jump');
const panel = document.querySelector('suggest-elemental');
const rows = [...panel.querySelectorAll('li')];

field.addEventListener('input', () => {
  const query = field.value.trim().toLowerCase();
  const hits = rows.filter((row) => row.textContent.toLowerCase().includes(query));
  panel.querySelector('ul').replaceChildren(...hits);
  panel.open = query !== '' && hits.length > 0;
});

<div class="composer">
  <label for="note">Comment</label>
  <textarea id="note" rows="4" autocomplete="off">Ship it @</textarea>
  <div class="at-caret">
    <suggest-elemental for="note" tab-completes><ul></ul></suggest-elemental>
  </div>
</div>

/* the panel is absolutely positioned, so it adds no height to anything — the bottom padding
   is what keeps it inside this preview, and is not part of the pattern */
.composer { position: relative; padding-block-end: 9rem; }
/* `resize: vertical` and not `both`: a field dragged wider than its column takes the panel
   anchored to it off the edge with it */
.composer textarea {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  padding: 0.5rem; font: inherit; color: inherit;
  background: none;
  border: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
  border-radius: 0.375rem;
}

/* the panel hangs off a box of no size that the page moves to the caret, so the element's
   own `inset-block-start: 100%` resolves against the caret's line and not the field's
   bottom edge */
.at-caret { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 0; height: 0; }
/* `width: max-content` because the anchor above is a box of no size: an absolutely
   positioned panel shrinks to fit its containing block, and a containing block of zero
   width wraps every row. The max-height is capped under the element's own 20rem so the
   emoji list scrolls inside the space this sample reserves below the field */
.at-caret suggest-elemental {
  min-width: 12rem; width: max-content; max-width: 20rem;
  --suggest-elemental-max-height: 10rem;
}
.at-caret small { opacity: 0.65; margin-inline-start: 0.4rem; }

// Shortcode to glyph, because that is the shape this data has everywhere else — the rows the
// panel wants are built off it below.
const EMOJI = {
  tada: '🎉', fire: '🔥', rocket: '🚀', sparkles: '✨', bug: '🐛', eyes: '👀',
  joy: '😂', smile: '😄', wink: '😉', thinking: '🤔', sob: '😭', rage: '😡',
  sunglasses: '😎', heart: '❤️', thumbsup: '👍', thumbsdown: '👎', clap: '👏',
  pray: '🙏', muscle: '💪', wave: '👋', ok_hand: '👌', brain: '🧠', skull: '💀',
  ghost: '👻', robot: '🤖', poop: '💩', star: '⭐', zap: '⚡', boom: '💥',
  rainbow: '🌈', coffee: '☕', beer: '🍺', pizza: '🍕', cake: '🎂', gift: '🎁',
  bell: '🔔', lock: '🔒', key: '🔑', hammer: '🔨', wrench: '🔧', gear: '⚙️',
  package: '📦', books: '📚', memo: '📝', chart: '📈', calendar: '📅', mag: '🔍',
  warning: '⚠️', construction: '🚧', white_check_mark: '✅', x: '❌',
  question: '❓', snake: '🐍', whale: '🐳', cat: '🐱', dog: '🐶', unicorn: '🦄',
  penguin: '🐧'
};

const ROWS = {
  '@': [
    { value: '@stamat', hint: 'Nikola Stamatović' },
    { value: '@koyev', hint: 'Marko Jević' },
    { value: '@msavin', hint: 'Max Savin' },
    { value: '@jesussandreas', hint: 'Jesus Sandrea' }
  ],
  ':': Object.entries(EMOJI).map(([name, glyph]) => ({ value: glyph, hint: `:${name}:` }))
};

const field = document.getElementById('note');
const panel = document.querySelector('suggest-elemental');
const anchor = document.querySelector('.at-caret');

const escapeText = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');

// a trigger character at a word start, and the word after it — at a word start so an
// e-mail address and a `10:30` do not open the panel
const TOKEN = /(?:^|\s)([@:])([\p{L}\p{N}_+-]*)$/u;

function token() {
  const hit = TOKEN.exec(field.value.slice(0, field.selectionStart));
  if (!hit) return null;
  return { trigger: hit[1], query: hit[2].toLowerCase(), at: field.selectionStart - hit[1].length - hit[2].length };
}

// where the caret is, in pixels, by mirroring the field into a div and measuring a span
// planted at the caret — nothing on the platform reports it, because neither Range nor
// getSelection reaches inside a form control
function caretPoint() {
  const style = getComputedStyle(field);
  const mirror = document.createElement('div');
  for (const prop of ['font', 'padding', 'border', 'width', 'boxSizing', 'letterSpacing']) mirror.style[prop] = style[prop];
  mirror.style.cssText += ';position:absolute;visibility:hidden;white-space:pre-wrap;overflow-wrap:break-word';
  mirror.textContent = field.value.slice(0, field.selectionStart);
  const caret = mirror.appendChild(document.createElement('span'));
  caret.textContent = '.';
  document.body.append(mirror);
  const point = {
    x: field.offsetLeft + caret.offsetLeft,
    y: field.offsetTop + caret.offsetTop + parseFloat(style.lineHeight) - field.scrollTop
  };
  mirror.remove();
  return point;
}

function refresh() {
  const now = token();
  if (!now) {
    panel.open = false;
    return;
  }

  // prefix before anywhere: typing `:fi` wants `:fire:` at the top, not every emoji with an
  // `f` somewhere in it
  const hits = ROWS[now.trigger]
    .map((row) => ({ row, rank: (row.value + ' ' + row.hint).toLowerCase().indexOf(now.query) }))
    .filter((scored) => scored.rank >= 0)
    .sort((a, b) => a.rank - b.rank)
    .map((scored) => scored.row);

  panel.innerHTML = '<ul>' + hits.map((row) =>
    `<li><a href="#" data-value="${escapeText(row.value)}">${escapeText(row.value)}<small>${escapeText(row.hint)}</small></a></li>`
  ).join('') + '</ul>';

  const point = caretPoint();
  anchor.style.transform = `translate(${point.x}px, ${point.y}px)`;
  panel.open = hits.length > 0;

  // the pattern's "automatic selection": the first row is the cursor from the start, so
  // Enter takes it with no arrow key first. Deferred because replacing the rows is a
  // mutation, and the element clears the cursor when that lands.
  if (panel.open) queueMicrotask(() => panel.moveTo(0));
}

function accept(value) {
  const now = token();
  if (!now) return;
  const before = field.value.slice(0, now.at) + value + ' ';
  field.value = before + field.value.slice(field.selectionStart);
  field.setSelectionRange(before.length, before.length);
  field.focus();
}

field.addEventListener('input', refresh);
field.addEventListener('click', refresh);

// the arrows are the panel's while it is open — re-rendering on them would clear the cursor
// the arrow just moved, and Enter would fall through to the field as a newline
field.addEventListener('keyup', (event) => {
  if (!panel.open && (event.key.startsWith('Arrow') || event.key === 'Home' || event.key === 'End')) refresh();
});

// the rows are `<a href="#">` because that is the only thing the element counts as an
// option, and a token is not a destination, so nothing here is allowed to navigate
panel.addEventListener('click', (event) => {
  const row = event.target.closest('a[data-value]');
  if (!row) return;
  event.preventDefault();
  accept(row.dataset.value);
});