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
    
User::factory()->count(50)->create()

 

Step 3: Create a Controller

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

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('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'). '%')
                    ->take(10)
                    ->get();
      
        return response()->json($data);
    }
}

 

 

Step 4: Define Routes

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

routes/web.php

<?php
  
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.

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 jQuery UI Ajax Autocomplete Search - Websolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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/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 11 jQuery UI Ajax Autocomplete Search - websolutionstuff</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 url = "{{ route('autocomplete') }}";
    
    $( "#search" ).autocomplete({
        source: function( request, response ) {
          $.ajax({
            url: url,
            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>

 

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

Jul-03-2023

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

Apr-30-2022

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

Jan-05-2023

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

Feb-18-2021