Laravel 9 Autocomplete Search Example Using Ajax

Hello Artisan,

In this example, I will show you laravel 9 autocomplete search example from the database using an ajax request. you'll learn to create autocomplete search in laravel 9 to search matching data with ajax requests. Here you will learn how to search data in Laravel 9 application without page refresh using ajax request from autocomplete textbox in laravel 9.

I would like to share with you laravel 9 input field autocomplete ajax search example step by step. Things a scenario in your application that, Jquery autocomplete is must if you are dealing with big data like you have items or products table and thousands of records so it's not possible to give drop-down box, but it is better if we use autocomplete instead of the select box.

So in this example, I am here to show you how we can create an ajax autocomplete search with jquery ajax from the database in Laravel 9 app. I will create a simple blade file with the input field for searching form and we will create autocomplete text box using typeahead.js.

So, let's see simple steps to complete this ajax jquery autocomplete search example in Laravel 9.

Step 1 - Download laravel 9

Open your terminal OR command prompt and run bellow command to have a fresh laravel 9 application:

composer create-project laravel/laravel example-app

Step 2: Create Table and Model

In this step, we have to create migration for items table using Laravel 9 php artisan command, so first fire bellow command

php artisan make:model Country -m

Now there will be a model called Country and a migration file made for countries in the database/migrations folder. Open the migration file to edit.

database/migrations/migration.php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCountriesTable extends Migration
{
    
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('code');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('countries');
    }
}

Now run php artisan migrate command to create our table.

Step 3 - Create a view

Go to the resources/views folder and open welcome.blade.php file and place the below code.

resources/views/welcome.blade.php

Step 4 - Make a controller

Create a new controller using a command prompt. Command :

php artisan make:controller SearchController

Then place the code in our newly created search controller like:

App\Http\Controllers\SearchController .php

Read also: Upload Large CSV File using Queue Job Batching in Laravel

Hope this Laravel 9 ajax autocomplete search example will help you.