Real-Time Search and Filtering in Livewire 3.0

December 27, 2024
4:25 pm
No Comments

Step 1: Setting Up the Product Model and Database

1. Create the Product Model

Run the following Artisan command to generate the Product model and migration:


php artisan make:model Product -m

2. Update the Migration File

Open the generated migration file and define the structure of the products table:


<?php

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

class CreateProductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('category');
            $table->decimal('price', 8, 2);
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('products');
    }
}

3. Run the Migration

Execute the migration to create the products table in your database:


php artisan migrate

4. Seed Sample Data

Create a seeder to populate the products table with sample data:


php artisan make:seeder ProductSeeder

Open the generated seeder file in database/seeders/ProductSeeder.php and add the following:


<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\Product;

class ProductSeeder extends Seeder
{
    public function run()
    {
        Product::create([ 'name' => 'Smartphone', 'category' => 'electronics', 'price' => 699.99 ]);
        Product::create([ 'name' => 'Laptop', 'category' => 'electronics', 'price' => 999.99 ]);
        Product::create([ 'name' => 'T-Shirt', 'category' => 'fashion', 'price' => 19.99 ]);
        Product::create([ 'name' => 'Jeans', 'category' => 'fashion', 'price' => 49.99 ]);
        Product::create([ 'name' => 'Headphones', 'category' => 'electronics', 'price' => 199.99 ]);
    }
}

Run the seeder to populate the database:


php artisan db:seed --class=ProductSeeder

Step 2: Creating the Livewire Component

We’ll begin by creating a new Livewire component for the search and filtering functionality:


php artisan make:livewire SearchFilter

This will generate:

app/Livewire/SearchFilter.php – The PHP class for the component logic.
resources/views/livewire/search-filter.blade.php – The Blade file for the search UI.

Step 3: Setting Up the Component Logic

Open SearchFilter.php and update it with the following logic:


<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Product;

class SearchFilter extends Component
{
    public $search = '';
    public $category = '';
    public $priceRange = '';

    public function render()
    {
        $products = Product::query()
            ->when($this->search, function ($query) {
                $query->where('name', 'like', '%' . $this->search . '%');
            })
            ->when($this->category, function ($query) {
                $query->where('category', $this->category);
            })
            ->when($this->priceRange, function ($query) {
                [$min, $max] = explode('-', $this->priceRange);
                $query->whereBetween('price', [(int)$min, (int)$max]);
            })
            ->get();

        return view('livewire.search-filter', [
            'products' => $products,
        ]);
    }
}

Key Points:

Dynamic Filters: The when() method dynamically applies filters based on user input.
Search Field: Filters results based on product names.
Category and Price Filters: Allows filtering by category and price range.

Step 4: Creating the Search and Filter UI

Open search-filter.blade.php and design the search and filter interface:


<div>
    <div>
        <input type="text" placeholder="Search products..." wire:model="search">

        <select wire:model="category">
            <option value="">Select Category</option>
            <option value="electronics">Electronics</option>
            <option value="fashion">Fashion</option>
        </select>

        <select wire:model="priceRange">
            <option value="">Select Price Range</option>
            <option value="0-50">$0 - $50</option>
            <option value="50-100">$50 - $100</option>
            <option value="100-500">$100 - $500</option>
        </select>
    </div>

    <div>
        @if ($products->isEmpty())
            <p>No products found.</p>
        @else
            <ul>
                @foreach ($products as $product)
                    <li>
                        <h3>{{ $product->name }}</h3>
                        <p>Category: {{ $product->category }}</p>
                        <p>Price: ${{ $product->price }}</p>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</div>

Step 5: Real-Time Search in Action

Real-time search allows users to see the results instantly as they type in the search box. This is achieved through the wire:model** binding**, which keeps the backend and frontend properties in sync without page reloads.

Example:

If a user types “Phone” in the search box, Livewire will filter and display only the products matching “Phone” instantly.

Final Output

With the above setup, your search and filtering component will:

Allow users to search for products by name in real time.
Filter results by category and price range dynamically.
Display updated results instantly without reloading the page

Key Features Covered Today

Real-time search using wire:model.
Dynamic filtering with multiple criteria.
Query building using when().
Responsive and styled UI for search and filter components.

About

Services

Contact

410 C, Jaina Tower-1, District Center, Janak Puri New Delhi-110058, India.