Dynamic and real-time search: Select2 Ajax autocomplete allows users to search for options dynamically as they type. It sends AJAX requests to the server, retrieves search results in real-time, and updates the dropdown list accordingly. This provides users with instant feedback and a smoother search experience.
Step 1: Install Laravel App
composer create-project laravel/laravel example-app
Run migration
php artisan migrate
Step 2: Add Dummy Users
php artisan tinker
User::factory()->count(20)->create()
Step 3: Create Controller
app/Http/Controllers/SearchController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('searchDemo');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete(Request $request): JsonResponse
{
$data = [];
if($request->filled('q')){
$data = User::select("name", "id")
->where('name', 'LIKE', '%'. $request->get('q'). '%')
->get();
}
return response()->json($data);
}
}
Step 4: Create Routes
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(SearchController::class)->group(function(){
Route::get('demo-search', 'index');
Route::get('autocomplete', 'autocomplete')->name('autocomplete');
});
Step 5: Create View File
resources/views/searchDemo.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Select2 JS Autocomplete Search Example - webthestuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 10 Select2 JS Autocomplete Search Example - webthestuff.com</h1>
<select class="form-control" id="search" style="width:500px;" name="user_id"></select>
</div>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('#search').select2({
placeholder: 'Select an user',
ajax: {
url: path,
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id
}
})
};
},
cache: true
}
});
</script>
</body>
</html>Run Laravel App:
php artisan serve
Now, Go to web browser, type the given URL and see the output:
http://localhost:8000/demo-search
