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.

<?php
  
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) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

Then after you can simply run migration:

php artisan migrate

Create the app/Models/Item.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Item extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name'
    ];
}

Step 3: Create Route

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

<?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

<?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")
                ->where("name","LIKE","%{$request->query}%")
                ->get();
   
        return response()->json($data);
    }
}

Step 5: After You Create View File

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

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
   
<div class="container">
    <h1>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.com</h1>   
    <input class="typeahead form-control" type="text">
</div>
   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

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.

http://your_base_url/search