What seems to be the problem:
I’m new to this in general so keep it easy on me,
I’m following the screencasts and the search works fine until you get the No results for the current search after that if any a single character is typed into the search field in the network tab you can see requests are flooding the server till it stops responding
I want to know if there is a way to ignore any further search if the last character in search produces an empty query result
Hey, @sudanese
You can do the following:
We assume you have articles search feature, you can make search component
php artisan livewire:make search
in search.blade.php
<input type="text"
placeholder='Search...'
autocomplete="off"
wire:model.debounce.500ms="search" />
Here You can bind the search property and if the search is null or less than 3 character return an empty array.
We add debounce.{time}ms for holding the request .5s before hitting the server every time the user type something.
In Search.php
public $search, $empty = '';
public function render()
{
if (!is_null($this->search) && strlen($this->search) < 3) {
$articles = Post::search($this->search);
$this->empty = '';
} else {
$articles = [];
$this->empty = __('Nothings Found.');
}
return view('livewire.blog.search', [
'articles' => $articles,
]);
}
In articles.blade.php
<livewire:search />
@forelse($articles as $article)
<p>
{{ $article->title }}
</p>
@empty
{{ __($empty) }}
@endforelse
Hi @skywalker,
thanks for your reply but I’m not sure if we are in the same page
the search works fine , and when there is no data I’m just putting simple html no data found , but after that if you write anything in the search box the requests are going forever in a loop.
this is my blade :
<input wire:model='filters.search' placeholder='Search ' />
and then
I’ve this in my controller
public $filters = [
'search' => '',
'location' => null,
'team' => null,
'title' => '',
];
then
public function getUsersQueryProperty()
{
$query = User::query()
->when($this->filters['location'], fn($query, $location) => $query->where('location', $location))
->when($this->filters['team'], fn($query, $team) => $query->where('team', $team))
->when($this->filters['title'], fn($query, $title) => $query->where('title', 'like', '%'.$title.'%'));
$this->applySearch($query);
return $this->applySorting($query);
}
function applySearch($query)
{
$query->when($this->filters['search'], fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'));
return $query;
}
public function getUsersProperty()
{
//return $this->applyPagination($this->usersQuery);
return $this->cache(function () {
return $this->applyPagination($this->usersQuery);
});
}
public function render()
{
if($this->selectAll)
{
$this->selected = $this->usersQuery->pluck('id');
}
return view('livewire.apps.users.users',
[
'users' => $this->users,
]);
}the issue was i’ve
wire:loading.class.delay=“opacity-50”
inside @unless
when i take it out it’s working fine