Global Search on database with Laravel Livewire, Scout, and Tailwind CSS

<p>Quickly implement Global search feature in Laravel project using Livewire, Scout, and Tailwind CSS. This boilerplate provides a straightforward setup for creating a search interface that queries multiple models with Scout's database driver, styled with Tailwind CSS. Ideal for developers looking to add a powerful search function with minimal setup.&nbsp;</p>


The Global Search Boilerplate integrates Laravel Livewire, Scout, and Tailwind CSS to create a powerful global search feature in Laravel applications. This setup provides a straightforward implementation for searching across multiple models with real-time updates.

1. System Requirements

Ensure you have the latest versions of Composer and PHP.

Composer version 2.7.6 or above PHP version 8.1.10 or above

2. Packages Used

Installed the necessary packages using Composer

composer require livewire/livewire

composer require laravel/scout

3. Laravel Scout Integration

Scout Configuration: The boilerplate uses Laravel Scout with the database driver for indexing and searching.

# in .env

SCOUT_DRIVER=database

Models: Added the Searchable trait to Order, Category, and Tag models for search capabilities.

use Searchable;

public function toSearchableArray()
{
    return [
            'customer_name' => $this->customer_name,
            'status' => $this->status,
    ];
}

Livewire Component: The GlobalSearch component handles search queries and displays results.

// app/Http/Livewire/GlobalSearch.php

public function updatedSearch()
{
    $this->results = [
        'orders' => Order::search($this->search)->get(),
        'categories' => Category::search($this->search)->get(),
        'tags' => Tag::search($this->search)->get(),
    ];
}

Blade View: Provides the search input field and displays results using Tailwind CSS for styling.

<input type="text" wire:model.live="search" placeholder="category, tag, order..." class="border border-indigo-300 shadow-md rounded-md p-2 w-full mb-12 mt-2">

4. Installation

For detailed installation and setup instructions, refer to the project's GitHub repository. Follow the setup steps to integrate and use the global search feature in your Laravel application.