入力欄に追従するオートコンプリート候補

パターン

<input> がアンカー、候補の <ul> がターゲットです。リストには以下が必要：

1. 入力欄の真下に隙間なく配置（ネイティブの <select> 風）
2. 入力欄と幅が完全に一致
3. ビューポート下端からはみ出しそうなら上に反転

.search-input {
  anchor-name: --search;
}

.suggestions {
  position: absolute;
  position-anchor: --search;
  position-area: bottom-start;

  /* 幅戦略：入力欄に正確に合わせる */
  width: anchor-size(width);

  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none; /* 入力欄と境界を共有 */
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  max-height: 320px;
  overflow-y: auto;

  position-try-fallbacks: flip-block;
}

/* 反転時に角丸を入れ替え */
.suggestions:where(@position-try) {
  border-top: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

width: anchor-size(width)

これで候補リストが入力欄と正確に同じ幅になります。入力欄のサイズ指定方法（固定px、flex-grow、パーセンテージ）に関わらず動作します。JavaScriptで入力欄の幅を計測してドロップダウンに適用するのと同等ですが、無料で宣言的、リサイズ時に自動更新されます。

キーボード操作

アンカーポジショニングは純粋に視覚的です。以下は別途実装が必要：

• 入力欄に role="combobox"、候補に role="listbox"
• aria-activedescendant でフォーカス中の候補を追跡
• ArrowDown / ArrowUp でアクティブ項目を移動
• Enter で選択、Escape で閉じる

WAI-ARIA Authoring Practices の Combobox パターンが包括的なリファレンスです。

パフォーマンス

アンカーポジショニングはレイアウト変更時に再実行されます。10K 項目の曖昧検索でリストが毎秒60回再レンダリングされるような場合、アンカー処理自体は無視できる程度です — コストはReactの再レンダリングです。アンカーが遅いと疑ったらChrome DevToolsのPerformanceタブでプロファイルしてください。99%のケースで問題ないはずです。