検索 + サジェスト ドロップダウン
入力するたびに候補が絞り込まれる、サジェスト付きの検索ボックスです。JavaScriptで入力イベント（ oninput ）を監視し、候補配列を filter で前方一致ではなく部分一致で絞り込み、結果を一覧として表示します。
解説
入力するたびに候補が絞り込まれる、サジェスト付きの検索ボックスです。JavaScriptで入力イベント（oninput）を監視し、候補配列をfilterで前方一致ではなく部分一致で絞り込み、結果を一覧として表示します。さらに一致した文字を<b>で囲んで強調するので、どこがヒットしたかが一目で分かります。
向いている場面
SaaSのヘッダー検索、タグやカテゴリの選択補助、フォームの入力支援など、選択肢が多い入力に向きます。候補リストはmax-heightのアニメーションでなめらかに開閉します。
- 候補は
items配列を差し替えるだけで自由に設定できる - 絞り込みは大文字小文字を区別しない実装になっている
- 一致が0件のときはリストを閉じる処理が入っている
実務で使う際は、キーボード操作（上下キーやEnterでの確定）やスクリーンリーダー対応を足すとアクセシビリティが高まります。候補が多い場合は件数を絞ると見やすくなります。
よくある質問
候補のデータはどこで設定しますか
JavaScript内の items 配列に候補の文字列を並べるだけです。サーバーから取得した一覧を差し込めば動的なデータにも対応できます。絞り込みは大文字小文字を区別せず、部分一致で動きます。
キーボードだけで候補を選べますか
このサンプルはクリックでの選択を基本としています。上下キーでの移動やEnterでの確定を加えるとキーボード操作に対応でき、スクリーンリーダー利用者にも使いやすくなります。