検索オートコンプリート（候補表示）
検索オートコンプリートは、入力欄に文字を打つたびに候補リストを絞り込み、ドロップダウンで提示する検索補助 UI です。 input の oninput イベントで毎回 filter を実行し、配列データの中から入力文字を includes で部分一致させた候補だけを表示します。
解説
検索オートコンプリートは、入力欄に文字を打つたびに候補リストを絞り込み、ドロップダウンで提示する検索補助 UI です。input の oninput イベントで毎回 filter を実行し、配列データの中から入力文字を includes で部分一致させた候補だけを表示します。一致した文字は正規表現でハイライト表示するため、どこがヒットしたか一目で分かります。候補が無い・入力が空の時はリストを閉じる制御も入っています。
カスタマイズの勘所
- 候補データの配列を実データや API レスポンスに差し替える
- 商品名・品番・タグなど検索対象の項目を増やす
- 件数が多い場合は上位数件に絞って表示する
サイト内検索・商品検索・地名や駅名の入力補助など、候補を素早く見せたい場面に向きます。実運用では入力のたびに重い処理が走らないよう、API 連携時は数百ミリ秒のデバウンスを挟むと負荷を抑えられます。アクセシビリティ面では role="listbox" や矢印キーでの候補移動を加えると、キーボード操作だけで完結する検索になります。
よくある質問
候補のデータはどこを変えればよいですか。
JS 冒頭の DATA 配列が候補の元データです。ここを自社の商品名やキーワードに書き換えるか、API から取得した配列を渡せば、そのまま絞り込み検索として使えます。
入力した文字はハイライトされますか。
はい。一致した部分を正規表現で囲んで強調表示します。どの文字でヒットしたかが視覚的に分かるため、候補が多くても目的の項目を見つけやすくなります。