article

Wednesday, March 26, 2025

Laravel 12 Autocomplete Search JQuery UI

Laravel 12 Autocomplete Search JQuery UI

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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//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
?
1
2
3
4
5
6
7
8
9
10
//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');
Posted by ednalan at 11:54 PM . Under .

Related Post