我在我的网站的标题部分,我做了搜索,以找到我的产品
我在输入下面放了一个框来显示在该框中搜索的产品,但是在搜索之前,我所有的产品都显示在该框中...
我不要这个。
这是我的搜索组件
public $search;
public $item;
public function mount(Product $item){
$this->item = $item;
}
protected $queryString = ['search'];
public function render()
{
$allPro = Product::where('title', 'LIKE', "%{$this->search}%")->latest()->paginate(1);
return view('livewire.site.layout.header.search',compact('allPro'));
}
刀片
<div class="header-center">
<div class="header-search header-search-extended header-search-visible d-none d-lg-block">
<a href="#" class="search-toggle" role="button"><i class="icon-search"></i></a>
<form action="" method="get" class="compare-dropdown">
@csrf
<div class="header-search-wrapper search-wrapper-wide dropdown-toggle" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"
title="جستجوی محصولات" aria-label="Compare Products">
<label for="q" class="sr-only">جستجو</label>
<button class="btn btn-primary" type="submit"><i class="icon-search"></i></button>
<input wire:model.debounce.1000="search" type="search" class="form-control" name="q" id="q"
placeholder="جستجوی محصولات ..." autocomplete="off" value="" required>
<div style="display: none;margin:8px" wire:target="search" wire:loading class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="dropdown-menu dropdown-menu-right" id="d">
<div class="dropdown-cart-products">
@if ($allPro->count() > 0)
@foreach ($allPro as $item)
<div class="product">
<div class="product-cart-details">
<h6 class="product-title" style="font-size: 15px">
<a
href="{{ route('site.product.index', $item->id) }}">{{ $item->title }}</a>
</h6>
</div>
<!-- End .product-cart-details -->
<figure class="product-image-container">
<a href="{{ route('site.product.index', $item->id) }}" class="product-image">
<img src="{{ url('') }}{{ $item->image }}"
alt="{{ $item->title }}" width="100" height="100">
</a>
</figure>
</div>
<!-- End .product -->
{!! $allPro->links() !!}
@endforeach
@else
<p>ببخشید ولی نتونستیم چیزی مرتبط با جستجو شما پیدا کنیم</p>
@endif
</div>
</div>
<!-- End .header-search-wrapper -->
</form>
</div>
<!-- End .header-search -->
</div>
照片
这是因为要立即渲染。将查询移动到函数中,并使用Livewires更新的钩子来启动它
试着这样做:
控制器:
public $search;
public $allPro; // <- declear $allPro as public property
protected $queryString = ['search'];
public function updatedSearch()
{
$this->run();
}
public function run()
{
$this->allPro = Product::where('title', 'LIKE', "%{$this->search}%")->latest()->paginate(1);
}
public function render()
{
return view('livewire.site.layout.header.search');
}