'Global' search option with livewire

I have a searchbar at the top of my admin section and would lilke to use it a 'global' search option. So when I type something in it it should search in the db/section I am in. E.g. if I am on the users page it should search for user, if I am on the products page it should search for product. But when I type there is no update to the backend/controller.

If have a normal controller which if returning a view:

 return view('admin.users.index')
                        ->with('pageTitle', 'Users');

In the index file I am extending the app-layout and calling the livewire users.index

<x-app-layout>
    <x-slot name="pageTitle">
        {{$pageTitle}}
    </x-slot>
    @livewire('admin.users.index')
</x-app-layout>

In the app-layout file I include the topheader where the searchbar is included:

@include('layouts.topheader')

topheader file

<header class="navbar navbar-expand-md d-none d-lg-flex d-print-none" >
    <div class="container-xl">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-nav flex-row order-md-last">
            <div class="d-none d-md-flex">
                @livewire('notifications')
            </div>
            @include('layouts.userdropdown')
        </div>
        @livewire('pagesearchbar')
    </div>
</header>

In the topheader I 'included' the pagesearchbar with livewire. Pagesearchbar file

<div class="collapse navbar-collapse">
    <div>
        <div class="input-icon">
            <span class="input-icon-addon">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
            </span>
            <input wire:model.live.debounce.300ms="search" type="text" class="form-control" placeholder="{{ __('generic.Search') }}" aria-label="Search in website">
        </div>
    </div>
</div>

So when the users page is loaded. I have everything in place. Users table is shown with pagination. The pagination is working with livewire. But the pagesearchbar does nothing. The only time I get the searchbar working is to load in the livewire users.index file. The livewire pagesearchbar is shown in de debugbar, so I thought it should work.

How can I make the searchbar working with livewire? I think I made a wrong assumption with including the pagesearchbar.

LaryAI

2 years ago

Level 58

To make the search bar work globally with Livewire, you need to ensure that the Livewire component handling the search functionality is aware of the context it's being used in (e.g., users page, products page). Here's a step-by-step solution to achieve this:

Create a Livewire component for the global search bar.

php artisan make:livewire GlobalSearch

In the GlobalSearch component, you'll need to have a property that holds the current search term and a method to perform the search based on the current page context.

namespace App\Http\Livewire;

use Livewire\Component;

class GlobalSearch extends Component
{
    public $search = '';
    public $context = '';

    public function mount($context)
    {
        $this->context = $context;
    }

    public function updatedSearch()
    {
        // Perform search based on context
        // You can emit an event or call a method to update the parent component
        $this->emit('onSearch', $this->search, $this->context);
    }

    public function render()
    {
        return view('livewire.global-search');
    }
}

In your global-search.blade.php view, you'll have the search input:

<div>
    <input wire:model.debounce.300ms="search" type="text" class="form-control" placeholder="Search...">
</div>

In each of your page components (e.g., UsersIndex, ProductsIndex), you'll need to listen for the onSearch event and handle the search accordingly.

protected $listeners = ['onSearch' => 'handleSearch'];

public function handleSearch($searchTerm, $context)
{
    if ($context === 'users') {
        // Search users logic
    } elseif ($context === 'products') {
        // Search products logic
    }
    // ... handle other contexts
}

When you include the GlobalSearch component in your layout, pass the current context to it. For example, in your users.index view:

<x-app-layout>
    <x-slot name="pageTitle">
        {{$pageTitle}}
    </x-slot>
    @livewire('global-search', ['context' => 'users'])
    @livewire('admin.users.index')
</x-app-layout>

Finally, make sure that your main layout (app-layout) is set up to display the search component correctly.

By following these steps, you'll have a global search bar that is aware of the current page context and can perform searches accordingly. Remember to update your Livewire components to handle the search logic based on the context they receive.

Please or to participate in this conversation.