Loydtafireyi/ZimCart-Laravel-Ecommerce

use App\Product;
use Livewire\Component;
 
class SearchBar extends Component
{
    public $search = '';
 
    public function render()
    {
        $searchResults = [];
 
        if(strlen($this->search) > 2) {
 
            $searchResults = Product::with('category')->where('name', 'Like', '%'.$this->search.'%')->get();
        }
 
        $searchResults = collect($searchResults)->take(7);
 
        return view('livewire.admin.search-bar', compact('searchResults'));
    }
}

<div class="col-md-5">
    <input wire:model="search" type="text" name="" class="form-control rounded text-center position-relative" placeholder="Search Products">
    @if(strlen($search) > 2)
        @if($searchResults->count() > 0)
        <ul class="list-group position-absolute mt-2 ml-1 col-md-11">
            @foreach($searchResults as $result)
            <li class="list-group-item  bg-primary border-bottom">
                <a href="{{ route('products.edit', $result->slug) }}" class="d-flex justify-content-between  text-decoration-none">
                    <span class="text-light mt-4 text-capitalize">
                        <h6 class="font-weight-bold" style="letter-spacing: 2px">{{ $result->name }}</h6>
                    </span>
                    @if($result->photos->count() > 0)
                       <img src="/storage/{{ $result->photos->first()->images }}" style="width: 50px; height: 50px; border-radius: 100%;">
                    @else
                        <img src="{{ asset('frontend/img/no-image.png') }}" width="50">
                    @endif
                </a>
            </li>
            @endforeach
        </ul>
        @else
        <div class="position-aboslute">
            <span><strong>No results for {{ $search }}</strong></span>
        </div>
        @endif
    @endif
</div>