Live Search With Laravel, Livewire, And Meilisearch Example

Hello artisan,

In this tutorial, I will show you how to build a live search using Laravel, livewire, and meilisearch. In my previous tutorial, I have created many tutorial on Laravel search. But in this laravel search example, i am going to use maili search. So from this tutorial, you will learn full text search example with maili search in laravel.

Meilisearch is an open-source search engine that is built using Rust and can be integrated into any application to provide Full-Text Search. I will create a articles table and we will create a body field and we will search on that field using maili search in laravel for implementing laravel 9 full text search.

Step 1: download Laravel 9

This is the first step, and we need a fresh Laravel 9 app in this step to create a laravel 9 full text search example in Laravel. So you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Model

In this step, we need a Article model to search our data from the database. So create a model like below:

php artisan make:model Articles -m

Now update the file like:

App/Models/Articles.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Articles extends Model
{
    use HasFactory;

    protected $fillable = [
        'name', 'author', 'content'
    ];
}

And the migration:

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

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->longText('content');
            $table->string('author');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
};

Now run php artisan migrate command to create our articles table.

Read also: Laravel 9 Autocomplete Search Example using Ajax

Step 3: Install and Configure Livewire

Now the next step is to install the livewire package. Livewire will be a major help in adding reactivity to our application for live searching.

composer require livewire/livewire

We then need to include the livewire Javascripts in the app.blade.php file in the resources/views/components folder.

Step 4: Create Livewire Component

Now in this step, we have to create a livewire component for searching using maili search in laravel.

php artisan make:livewire Articles

Now update the following file like:

resources/views/dashboard.blade.php

Step 5: Install Scout

In this step, we have to install scout package and we will publish them:

composer require laravel/scout

Next, we have to publish our configuration file. so you need to run the below command:

php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"

Now we need to add the searchable trait in Articles model like:

App/Models/Articles.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable; //import the trait

class Articles extends Model
{
    use HasFactory;
    use Searchable; //add this trait

    protected $fillable = [
        'name', 'author', 'content'
    ];
}

We also need to install a few packages to be able to interact with meilisearch

composer require meilisearch/meilisearch-php http-interop/http-factory-guzzle

We can then set the environment variables to now use Meilisearch in .env like:

.env

SCOUT_DRIVER=meilisearch
MEILISEARCH_HOST=http://127.0.0.1:7700
MEILISEARCH_KEY=masterKey

Now run this command to import articles like:

php artisan scout:import "App\Models\Articles"

Step 6: Create Search Logic

Now update the Article livewire component to implement search logic like:

App/Livewire/Articles.php

namespace App\Http\Livewire;

use App\Models\Articles as ModelsArticles;
use Livewire\Component;


class Articles extends Component
{

    public $search = '';
    public $articles;

    public function render()
    {
        if (empty($this->search)) {

            $this->articles = ModelsArticles::get();
        } else {
            $this->articles = ModelsArticles::search($this->search)->get();
        }

        return view('livewire.articles');
    }
}

Now update the blade like:

resources/view/livewire/articles.blade.php

Read also: Laravel 9 Scout Full Text Search Example

Now you can test it. hope it can help you.