はじめに
インクリメンタルサーチは、ユーザーが検索ボックスに入力するたび、検索結果がリアルタイムで更新される機能です。これにより、ユーザーは検索結果を即座に確認できるため、よりスムーズな検索体験を提供できます。本記事では、LaravelとjQueryを使用してインクリメンタルサーチを実装する方法を紹介します。
1. データベースの設定
まず、検索対象となるデータベーステーブルを準備します。今回は、usersテーブルを例に、ユーザー名やメールアドレスを検索対象とします。
2. ルートの設定
検索リクエストを処理するために、routes/web.phpにルートを追加します。
use App\Http\Controllers\UserController;
Route::get('/search', [UserController::class, 'search'])->name('user.search');
このルートは、検索処理を行うコントローラーにリクエストを転送します。
3. コントローラーの設定
次に、検索処理を行うコントローラーを設定します。UserControllerを使って検索機能を実装します。
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function search(Request $request)
{
$query = $request->input('query');
// 検索条件を定義
$users = User::where('name', 'LIKE', "%{$query}%")
->orWhere('email', 'LIKE', "%{$query}%")
->get();
// 結果をJSONで返す
return response()->json($users);
}
}
このメソッドでは、ユーザーが入力したクエリに基づいてusersテーブルを検索し、その結果をJSON形式で返します。
- ビューの作成
次に、検索フォームを含むビューを作成します。resources/views/search.blade.phpというファイルを作成し、以下のコードを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インクリメンタルサーチ</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<h1>ユーザー検索</h1>
<input type="text" id="search" placeholder="ユーザー名またはメールアドレスを入力">
<ul id="results"></ul>
</div>
<script>
$(document).ready(function() {
$('#search').on('keyup', function() {
let query = $(this).val();
$.ajax({
url: "{{ route('user.search') }}",
type: "GET",
data: {'query': query},
success: function(data) {
$('#results').empty();
if (data.length > 0) {
$.each(data, function(index, user) {
$('#results').append('<li>' + user.name + ' (' + user.email + ')</li>');
});
} else {
$('#results').append('<li>結果が見つかりません</li>');
}
}
});
});
});
</script>
</body>
</html>
このビューでは、ユーザーが検索ボックスに文字を入力するたびに、jQueryのkeyupイベントが発生し、AJAXリクエストが送信されます。サーバーからのレスポンスに基づいて、検索結果が更新されます。
5. 動作の確認
ブラウザで/searchにアクセスし、検索フォームに名前やメールアドレスの一部を入力すると、インクリメンタルサーチが動作するはずです。
まとめ
LaravelとjQueryを使用してインクリメンタルサーチを実装する方法を紹介しました。この機能を使うことで、ユーザーはリアルタイムで検索結果を確認できるため、より快適な検索体験を提供できます。
ぜひ、プロジェクトに導入してみてください！