Here, I will show you the automatic search of laravel 8 from the database. you can understand the concept of the auto-complete ajax text box in laravel 8. This text goes into detail in laravel 8 typeahead autocomplete ajax.

Explain it easily with the example of laravel 8 typeahead ajax autocomplete. You only need one step to make a laravel 8 jquery ajax autocomplete example.

Bootstrap Typeahead JS provides a user-friendly view so, we can easily write jquery ajax code and make it a search engine to complete automatically in laravel 8 application. we can easily use Typeahead JS with bootstrap.

Completion of jquery is appropriate when dealing with big data, such as having items or a table of products and thousands of records so it is not possible to provide a drop-down box, but it is better if we use an automatic finish instead of a selection box.

Follow the old step to create an automatic search with the laravel 8 app.

Step 1 : Download Laravel 8

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Migration and Model

php artisan make:migration create_items_table

After this command you will find a single file following the "data / migration" path and you must place a dynamic code in your migration file creation file.

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemsTable extends Migration
    public function up()
        Schema::create('items', function (Blueprint $table) {
     * Reverse the migrations.
     * @return void
    public function down()

Then after you can simply run migration:

php artisan migrate

Create the app/Models/Item.php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
    use HasFactory;
    protected $fillable = [

Step 3: Create Route

You Can add the some following code at routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
Route::get('search', [SearchController::class, 'index'])->name('search');
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');

Step 4: Create Controller

Create controller and add some following code at app/Http/Controllers/SearchController.php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Item;
class SearchController extends Controller
    public function index()
        return view('search');
    public function autocomplete(Request $request)
        $data = Item::select("name")
        return response()->json($data);

Step 5: After You Create View File

Create the resources/views/search.blade.php file.

<!DOCTYPE html>
    <title>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS -</title>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
<div class="container">
    <h1>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS -</h1>   
    <input class="typeahead form-control" type="text">
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);

After you run the follwing code.

php artisan serve

Let us execute this example by the following URL in the browser. This URL may be different based on your website.