Laravel 11 jQuery UI Ajax Autocomplete Search

Websolutionstuff | Jun-19-2024 | Categories : Laravel jQuery

Hello, laravel web developers! In this article, we'll see how to create an Ajax autocomplete search in laravel 11. here, we'll learn to create jQuery autocomplete search laravel 11. we'll use jquery-ui to search auto-complete records in laravel.

Sometimes, we required auto suggestion or autocomplete searches such as Google map addresses. So, we'll use the autocomplete() function in jQuery ajax in laravel 11.

Laravel 11 jQuery UI AJAX Autocomplete Search

laravel 11 jquery ui ajax autocomplete search


Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel example-app


Step 2: Create Dummy Users

After that, we'll create some dummy records using the following command with the help of Tinker.

php artisan tinker


Step 3: Create a Controller

Next, we'll create a controller and define the function for the Ajax call.


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('search');
     * Show the form for creating a new resource.
     * @return \Illuminate\Http\Response
    public function autocomplete(Request $request): JsonResponse
        $data = User::select("name as value", "id")
                    ->where('name', 'LIKE', '%'. $request->get('search'). '%')
        return response()->json($data);



Step 4: Define Routes

Then, we'll define the routes in the web.php file.


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
Route::get('search', [SearchController::class, 'index']);
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');


Step 5: Create View File

After that, we'll create a blade file and add the HTML code to that file.


<!DOCTYPE html>
    <title>Laravel 11 jQuery UI Ajax Autocomplete Search - Websolutionstuff</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 jQuery UI Ajax Autocomplete Search - websolutionstuff</h3>
        <div class="card-body">
            <form action="#" method="POST" enctype="multipart/form-data" class="mt-2">
                <input class="form-control" id="search" type="text">
                <div class="mb-3 mt-3">
                    <button type="submit" class="btn btn-success">Submit</button>
<script type="text/javascript">
    var url = "{{ route('autocomplete') }}";
    $( "#search" ).autocomplete({
        source: function( request, response ) {
            url: url,
            type: 'GET',
            dataType: "json",
            data: {
               search: request.term
            success: function( data ) {
               response( data );
        select: function (event, ui) {
           return false;


Step 6: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve


You might also like:

Recommended Post
Featured Post
How To Change Datepicker Start Date In Angular 15
How To Change Datepicker Start...

In this tutorial, I will guide you through the process of changing the start date of a datepicker component in Angular 1...

Read More


Laravel 9 Create Middleware For XSS Protection
Laravel 9 Create Middleware Fo...

In this article, we will see laravel 9 create middleware for XSS protection. Cross-site scripting is a type of...

Read More


How To Fixed Header In Datatable Using jQuery
How To Fixed Header In Datatab...

Data presentation and organization are easier with data tables. They help display information in an organized way. These...

Read More


How to Set Auto Database BackUp using Cron Scheduler In Laravel
How to Set Auto Database BackU...

In this article, we will see how to set auto database backup using the cron scheduler in laravel. here we will set ...

Read More