導入
Webアプリケーションにおいて、ユーザーが入力したキーワードに基づき検索候補をリアルタイムで提示する「オートコンプリート（サジェスト）」機能は、UX（ユーザー体験）向上に欠かせない要素です。特に、膨大なデータから目的の項目を探させる場合、ユーザーのタイピング数を減らし、入力ミスを防ぐ効果があります。本稿では、jQuery UIとPHPを連携させ、DB上のデータを非同期で取得する実務的な実装手法を解説します。
基礎知識
オートコンプリートを実現するには、フロントエンドの「入力検知」と、バックエンドの「データ検索およびレスポンス」という2つの役割が必要です。jQuery UIのAutocompleteウィジェットは、入力欄の文字変化を監視し、指定されたURLに対してAjaxリクエスト（デフォルトではGET）を送信します。この際、入力中の文字はパラメータ「term」として送られるため、PHP側ではこの値を受け取り、JSON形式で結果を返却するという流れが基本となります。
実装/解決策
実務レベルでは、単なる配列検索ではなく、SQLの「LIKE句」を用いたDB検索が必須となります。また、パフォーマンスを考慮し、検索対象のインデックス化（フルテキストインデックスなど）や、不要なリクエストを防ぐためのminLength（最小文字数）設定が重要です。レスポンスは必ず適切なContent-Typeヘッダーを付与し、クライアント側が正しくJSONとして解釈できるようにしましょう。
サンプルプログラム
以下は、データベースから検索候補を取得するバックエンド（PHP）の例です。
prepare(“SELECT name FROM products WHERE name LIKE :term LIMIT 10”);
$stmt->execute([‘term’ => ‘%’ . $term . ‘%’]);
$results = $stmt->fetchAll(PDO::FETCH_COLUMN);
// JSONで結果を返却
header(“Content-Type: application/json; charset=utf-8”);
echo json_encode($results);
} catch (PDOException $e) {
// 本番環境ではエラーログに出力し、ユーザーには空の配列を返す
header(“HTTP/1.1 500 Internal Server Error”);
echo json_encode([‘error’ => ‘Database error’]);
}
?>
応用・注意点
現場で活用する際は、以下の3点に注意してください。
1. サーバー負荷の軽減
ユーザーがキーを打つたびにSQLが走るため、minLengthは最低でも2〜3文字に設定してください。また、頻繁に検索されるデータであれば、Redis等のキャッシュメモリへの格納を検討しましょう。
2. セキュリティ対策
検索クエリをそのままDBに投げるのは危険です。必ずプリペアドステートメントを使用し、SQLインジェクションを回避してください。
3. ユーザー体験の最適化
検索結果が多すぎる場合は「LIMIT」句で件数を制限し、結果が0件の場合の挙動も定義しておくことが重要です。また、通信遅延を考慮し、短すぎる間隔でのリクエストを抑制するデバウンス処理をフロントエンド側で追加すると、より快適なUIになります。