Hi, i need some help with global search. I have a component Search and works fine with dropdown results but because i have a lot of products i want after pressing Enter to do the searching and filtering in one other component Shop. It redirects me but i want to show me there only the products that i had searched for.
Search component
class Search extends Component
{
public $search;
public $articles;
public $highlightIndex;
public function mount()
{
$this->search = '';
$this->articles = [];
$this->highlightIndex = 0;
}
public function resetFilters()
{
$this->reset('search');
}
public function incrementHighlight()
{
if ($this->highlightIndex === count($this->articles) - 1) {
$this->highlightIndex = 0;
return;
}
$this->highlightIndex++;
}
public function decrementHighlight()
{
if ($this->highlightIndex === 0) {
$this->highlightIndex = count($this->articles) - 1;
return;
}
$this->highlightIndex--;
}
public function selectArticle()
{
$article = $this->articles[$this->highlightIndex] ?? null;
if ($article) {
$this->redirect(route('shop', $article['id']));
}
}
public function updatedSearch()
{
$this->articles = Article::where('title', 'like', '%' . $this->search . '%')
->get()
->toArray();
}
public function render()
{
return view('livewire.search');
}
}
So how can i inject “search” term in my Shop component and filter the products?
Thanks!