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);
    }
}

Read Also: Autocomplete Search using Bootstrap Typeahead JS

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.