Download Laravel App
https://laravel.com/docs/12.x/installation
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12dev
DB_USERNAME=root
DB_PASSWORD=root
Database Migration
php artisan migrate
myapp>php artisan migrate
Migration table created successfully.
check database table
Add Dummy Users
php artisan tinker
User::factory()->count(200)->create()
Create Controller
myapp>php artisan make:controller SearchController
app\Http\Controllers\SearchController.php
//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
{
public function index(): View
{
return view('search');
}
public function autocomplete(Request $request): JsonResponse
{
$data = User::select("name as value", "id")
->where('name', 'LIKE', '%' . $request->get('search') . '%')
->take(10)
->get();
return response()->json($data);
}
}
Create View File
resources/views/search.blade.php
//resources/views/search.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 12 Autocomplete Search JQuery UI</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3">Laravel 12 Autocomplete Search JQuery UI</h3>
<div class="card-body">
<form action="#" method="POST" enctype="multipart/form-data" class="mt-2">
@csrf
<input class="form-control" id="search" type="text">
<div class="mb-3 mt-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$("#search").autocomplete({
source: function(request, response) {
$.ajax({
url: path,
type: 'GET',
dataType: "json",
data: {
search: request.term
},
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
$('#search').val(ui.item.label);
console.log(ui.item);
return false;
}
});
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
Route::get('/', function () {
return view('welcome');
});
Route::get('search', [SearchController::class, 'index']);
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');
