オートコンプリート
入力に応じて候補リストを絞り込み表示。↑↓キーやタップで選択でき、選ぶと入力欄に反映される。都道府県など日本語ダミー候補つき。
プレビュー
操作実際に入力して試せます。
使いどころ
都道府県や駅名のように候補が有限で決まっているデータに向く。この実装は20件のダミー候補をJS内に配列で持ち、入力のたびに includes() で絞り込む。候補にない文字列でもinputの値としてはそのまま残る（選択を強制しない）ため、リストにない自由記述も許容する「候補つきテキスト入力」として使える点がポイントで、都道府県コードのように「必ずリストの値でなければならない」用途にはむしろselect要素の方が適切である。この実装のようにローカル配列を毎回全走査するやり方は、候補が数百件を超えたり、サーバー検索に切り替える必要が出てきたりすると、デバウンスや読み込み中表示、リクエストの中断（AbortController）を別途足さないと破綻する。今のままはあくまで数十件規模の静的候補向けである。
仕組み
input には role="combobox" と aria-autocomplete="list"、aria-expanded、aria-controls="ac-list" が付き、候補は ul[role="listbox"] の中に li[role="option"] として都度生成される。選択の確定は click ではなく mousedown で拾っている点が要で、これは input が blur するタイミングが mousedown の直後（click より先）に来るため、click まで待つと blur によって候補リストがすでに閉じてしまい選択が成立しないという典型的な競合を避ける工夫である。同じ理由でタッチ操作も touchstart + preventDefault で処理している。キーボードは ArrowUp/ArrowDown で activeIdx をMath.min/maxでクランプしながら移動、Enterで確定、Escapeで閉じる。blur時は150msのsetTimeoutで閉じる処理を遅延させており、これは直前のmousedown/touchstartによる選択処理が先に完了する猶予を作るための調整である。
実装の注意
このコードを「簡潔にしよう」と mousedown を click に置き換えると、input の blur が先に発火してリストが hidden になり、選択そのものが効かなくなるという壊れ方をする。一見動くように見えて実機のタイミング差で再現しにくい種類のバグなので、mousedown+preventDefaultの意図はコメントなどで残しておく価値がある。blurの150ms遅延はマジックナンバーであり、低速端末や重い再描画が絡むと選択処理より先にタイムアウトが発火してリストが消えてしまう可能性がゼロではない。より頑健にするなら、タイマーではなく「選択処理中フラグ」でblurのクローズ処理を明示的にガードする方式に置き換えるとよい。また includes() による部分一致は「駅」のような1文字でもほぼ全候補がヒットするため、意図が絞り込みというより「含む語で全出し」になりやすく、前方一致にするか、候補数が多い場合はマッチ度でソートする改善が要る。
アクセシビリティ
role="combobox"・aria-autocomplete="list"・aria-expanded・aria-controls の組み合わせは、WAI-ARIAのlistbox付きコンボボックスパターンの土台として正しい。setActive() で aria-activedescendant を該当オプションのidに更新している点も、フォーカスをinputに残したままハイライト位置をスクリーンリーダーに伝える正しいテクニックである。ただし、リストを閉じるタイミング（selectItem・Escape・blur）でaria-expandedはfalseに戻しているのにaria-activedescendantは明示的にクリアされておらず、非表示になった過去のオプションIDを参照し続ける。閉じる処理と対にして removeAttribute("aria-activedescendant") を呼ぶべきである。なお、ハイライト中の候補にaria-selected="true"を足したくなるが、この実装のような自由入力・手動確定のコンボボックスでは慎重に。矢印キーで眺めているだけの候補はまだ「選択」されておらず、位置はaria-activedescendantが既に伝えている。未確定の候補にselectedを付けると、読み上げが『選択済み』と案内してEnterでの確定と区別できなくなるため、aria-selectedは実際に確定した選択を表すために取っておく（この見本のように付けない判断でよい）。
調整して使う
現状は静的配列のローカルフィルタだが、fetchベースの非同期検索に切り替えるならデバウンスとローディング表示、AbortControllerでの前リクエスト中断が追加要件になる。マッチ方式もincludes()による部分一致のほか、前方一致優先、読み仮名でのマッチなど日本語入力特有の工夫が考えられる。この単一選択のコンボボックスは、選んだ値をチップとして複数保持する「タグ入力」の候補選択部分にもそのまま転用できる構成であり、候補を都道府県・駅名のようにカテゴリでグループ化してrole="group"の見出しをリスト内に挟む拡張も自然である。
コード（コピーして使えます）
<div class="ac-wrap">
<label class="ac-label" for="ac-input">出発地</label>
<div class="ac-field" id="ac-field">
<input
id="ac-input"
class="ac-input"
type="text"
placeholder="都道府県・駅名を入力"
autocomplete="off"
role="combobox"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="ac-list"
/>
<ul class="ac-list" id="ac-list" role="listbox" aria-label="候補" hidden></ul>
</div>
<p class="ac-hint" id="ac-hint">入力で候補を絞り込みます</p>
</div>