How To Create Autocomplete Search In Laravel 9

  Jul 2023
  Category: Laravel
How To Create Autocomplete Search In Laravel 9

Hi Developers,

  Lets learn How To Create Autocomplete Search In Laravel 9. Initially lets create the input form and also the javascript function which gets triggered on typing the input text.
Also create the route that gets the input data and matches the data with the database records using the like Query . Using the route send the ontype function send the input data along with the request and the controller fetches the matching record and send the response back . The script function recieves the response and displays as the suggestions to autocomplete

Install Laravel Project

Lets create a new project by using command

laravel new autocomplete

Add Route

Lets add the necessary routes in


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

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

Route::get('search', [UserController::class, 'search']);
Route::get('autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');

Create Controller

Lets create a new controller by using command

php artisan make:controller UserController

Edit UserController

Lets write code in UserController


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use DB;

class UserController extends Controller
	public function search()
        return view('user');
    public function autocomplete(Request $request)
        $data = User::select("name")
        return response()->json($data);

Create Blade File

Lets create a new Blade file

<!DOCTYPE html>
    <title>How To Create Autocomplete Search In Laravel 9 - ITSolutionsGuides</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
<div class="container">
    <h2 style="margin: 30px 0px; text-align: center;">How To Create Autocomplete Search In Laravel 9 - ITSolutionsGuides</h2>   
    <input class="search form-control" type="text" placeholder="Search here...">
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
        source:  function (str, process) 
          return $.get(path, { str: str }, function (data) {
                return process(data);

We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

Be the first to know about releases and tutorial news and solutions.

We care about your data in our privacy policy.


ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides