I am trying to make a relatively simple "live search" that queries a Model and returns an interactive list of results. I am using Laravel 8.12 and Livewire 2.3
My Search.php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Event;
class Search extends Component
{
public $searchTerm;
public function render(){
$searchTerm = '%' . $this->searchTerm . '%';
$data = [
"events" => Event::where('title', 'like', $searchTerm)->get()
];
return view('livewire.search', $data);
}
}
and my Livewire blade
<div class="search hidden sm:block" style="padding-top: 8px; max-width: 300px;">
<input type="text" class="search__input input dark:bg-dark-1 placeholder-theme-13" placeholder="Search..." style="max-width: 300px;" wire:model="searchTerm" />
<i data-feather="search" class="search__icon dark:text-gray-300"></i>
</div>
<div class="search-result show">
<div class="search-result__content">
<div class="mb-5">
Search Results
@if($searchTerm != "")
@if($events->isEmpty())
<p>No results for {{ $searchTerm }}</p>
@else
<p>{{ $events->count() }} results for {{ $searchTerm }}</p>
@foreach($events as $event)
<a href="" class="flex items-center">
<div class="ml-3">{{ $event->title }}</div>
</a>
@endforeach
@endif
@endif
</div>
</div>
</div>
The weird part is I can see results coming back as I type in the console
but the results do not "appear" in front of me. Any help?