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. </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.