Laravel 11 JQuery UI Autocomplete Ajax Search Tutorial

Laravel 11 jQuery UI AJAX Autocomplete Search allows users to type into a search input bar and suggestions appear to help them quickly find what they’re looking for.

Let’s start creating an AJAX autocomplete search to provide quick search suggestions on the search bar:

Step 1: Install Laravel 11

Run the following Composer command to install laravel 11:

composer create-project --prefer-dist laravel/laravel myProject

Step 2 – Configure Database

Edit .env file from project root folder, and add your database details in it:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db_name
DB_USERNAME=your_db_user
DB_PASSWORD=your_db_pass

Step 3: Create View and Form

Create a search.blade.php file in resources/views folder to render the search input field and display the search results.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 JQuery UI Autocomplete Ajax Search Tutorial - ITCODSTUFF.COM</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Laravel 11 JQuery UI Autocomplete Ajax Search Tutorial - ITCODSTUFF.COM</h5>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="search" placeholder="Search for products">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>

Step 4: Implement Ajax Functionality with jQuery UI

initializes the jQuery UI Autocomplete widget on the #search input field with ajax functionality to populate autocomplete search result from database.

    <script>
        $(function() {
            $("#search").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('product.search') }}",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function(data) {
                            response(data.map(function(product) {
                                return {
                                    label: product.name,
                                    value: product.name
                                };
                            }));
                        }
                    });
                },
                minLength: 1
            });
        });
    </script>

Step 5: Create Controller and Methods

Create a controller and methods into it to handle the AJAX request and return search results.

php artisan make:controller ProductController

Edit ProductController.php file in app/http/controllers folder and add search() method into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product;

class ProductController extends Controller
{
    public function search(Request $request)
    {
        $search = $request->get('term');

        $products = Product::where('name', 'like', '%' . $search . '%')->get();

        return response()->json($products);
    }
}

Step 6: Define Routes

Define routes in web.php file to handle ajax autocomplete search request and display form request:

use App\Http\Controllers\ProductController;

Route::get('/', function () {
    return view('search');
});

Route::get('/search', [ProductController::class, 'search'])->name('product.search');

Step 7: Add Dummy Records in Database

Create a seeders file to add some dummy records in database by using the following command:

php artisan make:seeder ProductSeeder

Edit ProductSeeder.php class, define the data you want to seed:

public function run()
{
    \App\Models\Product::create(['name' => 'Product 1']);
    \App\Models\Product::create(['name' => 'Product 2']);
    \App\Models\Product::create(['name' => 'Product 3']);
    \App\Models\Product::create(['name' => 'Product 4']);
    // Add more products as needed
}

Run seeder to insert seeders file data into a database:

php artisan db:seed --class=ProductSeeder

Step 8: Test Application

To test the app, you need to start by artisan command:

php artisan serve

Hit http://127.0.0.1:8000/ url on browser for testing this application.

Laravel 11 jQuery UI AJAX autocomplete search allows users to have dynamic search suggestions displayed instantly on the input search bar from database.