Livewire search not making any results-CodePudding

I'm new to Livewire with some laravel experience and a good amount of php experience. My issue I'm trying to get a livewire search component to work. I'm using laravel 8 and livewire is installed. My nav menu is using livewire. SO I wish to insert a search into my layout as follows:

    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')
            @livewire('search-accounts')
            ... rest of my layout ...
       </div>
   </body>

I have a Model Account which has the Accounts used by my app. Account uses Eloquent and is working fine.

I have created a livewire component app/Http/Livewire/SearchAccounts.php with the following content:

<?php

namespace App\Http\Livewire;

use App\Models\Account;
use Livewire\Component;

class SearchAccounts extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-accounts', [
            'accounts' => Account::where( 'name', $this->search )->get(),
        ]);
    }

}

My blade template is resouces/views/livewire/search-accounts.blade.php and is as follows:

    <div class="px-4 space-y-4 mt-8">
        <form method="get">
            <input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model="search"/>
        </form>
        <div wire:loading>Searching accounts...</div>
        <div wire:loading.remove>
            <!--
                notice that $search is available as a public
                variable, even though it's not part of the
                data array
            -->
            @if ($search == "")
                <div class="text-gray-500 text-sm">
                    Enter a term to search for accounts.
                </div>
            @else
                @if($accounts->isEmpty())
                    <div class="text-gray-500 text-sm">
                        No matching result was found.
                    </div>
                @else
                    @foreach($accounts as $account)
                        <div>
                            <h3 class="text-lg text-gray-900 text-bold">{{$account->name}}</h3>
                            <p class="text-gray-500 text-sm">{{$account->url}}</p>
                            <p class="text-gray-500">{{$account->ipaddress}}</p>
                        </div>
                    @endforeach
                @endif
            @endif
        </div>
    </div>

When I view my app in the browser the search bar is shown and contains a placeholder called Search Accounts. I click the search bar and start typing but no search is done (my browsers dev tools show no Network or console activity).

Have I missed something? I've tried php artisan livewire:discover and cleared caches. I have followed a tutorial (https://laravel-livewire.com/) and not sure why I'm not getting the expected results. Other posts like this are actually getting some network activity as the ajax requests are made which I'm not seeing at all.

thanks

Craig

CodePudding user response：

Try changing this

<input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model="search"/>

<input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model.debounce.500ms="search"/>

This should send a network request at most every 500ms after an event (helps to not hammer the backend with every keypress).

Have a look at this page of the docs https://laravel-livewire.com/docs/2.x/actions

CodePudding user response：

Turned out that my @livewireScripts wasn't included in my master blade template. Once this was added livewire worked.