デバウンスライブ検索
入力のたびに即検索せず、手が止まってから一拍おいて絞り込むデバウンス付きライブ検索です。 input イベントごとに clearTimeout で前のタイマーを取り消し、 setTimeout で少し待ってから処理を走らせます。これにより、連続タイプ中は検索を間引き、止まったときだけ一度実行されます。
解説
入力のたびに即検索せず、手が止まってから一拍おいて絞り込むデバウンス付きライブ検索です。input イベントごとに clearTimeout で前のタイマーを取り消し、setTimeout で少し待ってから処理を走らせます。これにより、連続タイプ中は検索を間引き、止まったときだけ一度実行されます。配列を filter で絞り込み、ヒット件数を表示し、該当部分を mark でハイライトします。リストは奇数行に背景色を付けて読みやすくしています。
向いている場面
- FAQ やヘルプ記事の絞り込み検索
- タグやメンバー一覧のインクリメンタル検索
- API を叩く検索でリクエスト数を抑えたいとき
待ち時間は setTimeout の遅延値を変えて調整します。短くすると反応が速くなり、長くすると処理回数が減ります。この例は手元の配列を対象にしていますが、サーバー検索に差し替えれば無駄な通信を大幅に減らせます。空入力時に結果をクリアする処理も入っているので、表示の後始末も安心です。
よくある質問
デバウンスの待ち時間を変えられますか
入力後に setTimeout で待ってから検索を実行しています。この遅延の数値を変えれば、反応の速さと処理回数のバランスを調整できます。短いほど速く、長いほど処理が間引かれます。
検索対象を自分のデータに変えられますか
この例は決め打ちの配列を絞り込んでいます。その配列を自分のデータに差し替えれば対象を変えられます。サーバー検索にする場合は、フィルター処理を API 呼び出しに置き換えてください。