Autocomplete Search From Database Laravel 8


In this tutorial, we will learn how to dynamic autocomplete search using the Typeahead js in laravel 8. This tutorial goes into detail on laravel 8 typeahead autocomplete ajax.

you will learn simply about laravel 8 typeahead ajax autocomplete in jquery. You just need some steps to create a laravel 8 jquery ajax autocomplete in your project.

This post uses Bootstrap Typeahead JS provides a simple user interface so, we can easily write a code of simple jquery, ajax and make it a dynamic autocomplete search in laravel 8. we can easily use Typeahead JS with bootstrap.

Use Jquery autocomplete is easy to use to learn big data like you have a product table and many thousands of records so it's not possible to give a drop-down box, but it is better if we use autocomplete instead of a select box.

So, Follow the bellow step to create a simple autocomplete search with laravel 8 application.

Laravel 8 Autocomplete Search From Database With Typeahead Js
Step 1 : Download Laravel 8

We need to get fresh Laravel 8 version application using the bellow command, So open your command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Migration And Model

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

php artisan make:migration create_items_table


Then, After this command you will find one file in the following path "database/migrations" and you have to put bellow code in your migration file to create an items table.

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    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, simply run the migration:

php artisan migrate


After creating the "items" table you should create an Item model for items, so first create a file in this path "app/Models/Item.php" and put bellow content in item.php file:

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

We need to create routes for display view and ajax method. so open your "routes/web.php" file and add the following route.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\SearchController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('search', [SearchController::class, 'index'])->name('search');
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');
Step 4: Create Controller

In this step, we have to create a new controller as SearchController and we have also need to add two methods index() and autocomplete() on that controller like as you can see below:

app/Http/Controllers/SearchController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Item;
  
class SearchController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('search');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $data = Item::select("name")
                ->where("name","LIKE","%{$request->query}%")
                ->get();
   
        return response()->json($data);
    }
}
Step 5: Create View File

In the last step, let's create search.blade.php for layout and lists all items code here and put the following code:

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Autocomplete Search From Database Laravel 8 - phpcodingstuff.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>

Make sure you have some dummy data on your items table before running this example. so run bellow command for a quick run:

php artisan serve


Now you can open bellow URL on your browser:

http://localhost:8000/search
Laravel 8 Autocomplete Search From Database With Typeahead Js

I hope it can help you...

Leave a Reply

Your privacy will not be published. Required fields are marked *

We'll share your Website Only Trusted.!!