Laravel 8.x Ajax Autocomplete Search From Database

In this tutorial, i will tell you how to create dynamic jquery autocomplete search from database table in laravel 8 project. we can create manual ajax autocomplete textbox in laravel 8 using Ajax request.

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 select box.

In this laravel ajax form autocomplete tutorial you will learn from scratch that how to use ajax autocomplete search laravel 8 application. If you don't know how to search data with autocomplete in laravel using ajax, then i will teach you step by step. 

Follow bellow step to create simple autocomplete search with laravel 7 application.

Step 1 - Create new laravel project

Open your terminal OR command prompt and run bellow command:

composer create-project laravel/laravel LaravelSearch

Step 2: Create Table and Model

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

php artisan make:model Country -m

Now there will a model called Country and a migration file made for countries in 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 we are ready to migrate our database. Then a table called countries will be created. Command to migrate :

php artisan migrate

Step 3 - Create a view

Go to 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 command prompt. Command :

php artisan make:controller SearchController

Then place the code included below. Comments have been put to explain the code to you..Read them!

App\Http\Controllers\SearchController .php

Read also : Laravel Vue Js Read Data Using Vuex Example From Scratch

Now we are ready to run the project! Enter the command php artisan serve after navigating into the project to run our project. Then open web browser and type localhost:8000 to view the output.I hope it can help you.