導入
Webアプリケーションのユーザビリティを向上させる機能として、検索フォームでの「オートコンプリート（自動補完）」は非常に一般的です。ユーザーが入力途中の文字から候補を選択できるようにすることで、入力の手間を省き、誤入力を防ぐことができます。今回は、PHPとjQuery UIを利用して、データベースと連携した動的なオートコンプリート機能を実装する方法を解説します。
基礎知識
オートコンプリート機能を実現するには、フロントエンド（JavaScript）とバックエンド（PHP）の連携が不可欠です。
1. フロントエンド: jQuery UIのAutocompleteウィジェットを使用します。ユーザーの入力を検知し、サーバーへ非同期通信（Ajax）でリクエストを送ります。
2. バックエンド: PHPがリクエストを受け取り、データベースから候補を検索し、その結果をJSON形式で返却します。
データの受け渡しにJSONを利用することで、効率的かつ軽量な通信が可能になります。
実装/解決策
実装の基本フローは以下の通りです。
1. HTMLフォームを用意し、jQuery UIのAutocompleteを読み込む。
2. JavaScriptで `source` オプションにPHPファイルを指定する。
3. PHP側で `$_GET[‘term’]` を取得し、データベースを検索する。
4. 検索結果を `json_encode` で出力する。
サンプルプログラム
フロントエンド (index.html)
バックエンド (autocomplete.php)
prepare(“SELECT name FROM items WHERE name LIKE ?”);
// $stmt->execute([‘%’ . $term . ‘%’]);
// $results = $stmt->fetchAll(PDO::FETCH_COLUMN);
// サンプルデータ
$data = [‘Apple’, ‘Orange’, ‘Grape’, ‘Banana’];
$results = array_filter($data, function($item) use ($term) {
return mb_stripos($item, $term) !== false;
});
// JSONとして出力
header(“Content-Type: application/json; charset=utf-8”);
echo json_encode(array_values($results));
?>
応用・注意点
実務で実装する際は、以下の点に注意してください。
1. パフォーマンス対策: 毎回データベースにクエリを投げると負荷が高まります。頻出するクエリであれば、Redisなどのキャッシュサーバーを利用するか、メモリ上に一時的な辞書を作成して検索を高速化することを推奨します。
2. セキュリティ: `$_GET[‘term’]` はユーザー入力値です。SQLインジェクションを防ぐため、必ずプリペアドステートメントを使用してください。
3. 文字数制限: `minLength` を短くしすぎると、無駄なリクエストが増加します。サーバー負荷とユーザー体験のバランスを見て、通常は2〜3文字程度に設定するのが最適です。
4. エラーハンドリング: 通信エラーが発生した場合に備え、JavaScript側で `error` コールバックを定義し、ユーザーに通知する仕組みがあると親切です。