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
My Answer:
Here is an example of how you can create a search component using Livewire in Laravel:
1. Create a new Livewire component for the search functionality:
bash
php artisan make:livewire Search
2. Update the `Search.php` component file with the following code:
php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post;
class Search extends Component
{
public $search;
public function render()
{
$posts = Post::where('title', 'like', '%' . $this->search . '%')->get();
return view('livewire.search', [
'posts' => $posts
]);
}
}
3. Create a blade view file for the Livewire component in `resources/views/livewire/search.blade.php`:
html
@foreach($posts as $post)
- {{ $post->title }}
@endforeach
4. Include the Livewire search component in your layout file:
html
@livewire('search')
5. Make sure to include the Livewire scripts in your layout file:
html
@livewireScripts
Now you should be able to search for posts based on the title using the Livewire search component.
Rate this post
3 of 5 based on 5222 votesComments