Fix search suggestion

resources/views/components/search-form.blade.php

@@ -6,7 +6,7 @@
 <div id="search-form">
   <div x-data="{ showSearch: false }">
     <button
-      class="p-2"
+      class="p-2 cursor-pointer" 
       aria-label="Search"
       x-on:click="showSearch = !showSearch"
     >
@@ -20,39 +20,23 @@ class="bg-surface border-on-surface/8 shadow-xs absolute left-0 right-0 top-16 b
       x-on:click.outside="showSearch = false"
     >
       <div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
-        <form
-          method="get"
-          action="{{ route('shop.search.index') }}"
-          class="relative mx-auto max-w-3xl"
-        >
+
+        <form method="get" action="{{ route('shop.search.index') }}" class="relative mx-auto max-w-3xl">
           @foreach (collect(request()->query())->except('query') as $key => $value)
-            <input
-              type="hidden"
-              name="{{ $key }}"
-              value=@json($value)
-            >
+            <input type="hidden" name="{{ $key }}" value=@json($value)>
           @endforeach
 
           @svg($searchIcon, ['class' => 'hover:text-primary absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transition-colors'])
 
-          <input
-            type="search"
-            name="query"
-            value="{{ request('query') }}"
-            minlength="{{ core()->getConfigData('catalog.products.search.min_query_length') }}"
-            maxlength="{{ core()->getConfigData('catalog.products.search.max_query_length') }}"
-            placeholder="@lang('visual-debut::sections.header.blocks.search.placeholder')"
-            aria-label="@lang('visual-debut::sections.header.blocks.search.placeholder')"
-            aria-required="true"
-            pattern="[^\\]+"
-            required
-            class="pl-12 pr-10"
-          >
+            <livewire:search-suggestions searchIcon="lucide-search" />
 
-          @if (core()->getConfigData('catalog.products.settings.image_search'))
-            <x-shop::image-search-button :icon="$imageSearchIcon" class="absolute right-4 top-1/2 flex -translate-y-1/2 transform items-center" />
-          @endif
         </form>
+
+        @if (core()->getConfigData('catalog.products.settings.image_search'))
+          <x-shop::image-search-button :icon="$imageSearchIcon"
+                                       class="absolute right-4 top-1/2 flex -translate-y-1/2 transform items-center"/>
+          @endif
+          </form>
       </div>
     </div>
   </div>

resources/views/livewire/search-suggestions.blade.php

@@ -0,0 +1,53 @@
+<div class="relative">
+
+    <input
+        type="search"
+        wire:model.live="query"
+        minlength="{{ core()->getConfigData('catalog.products.search.min_query_length') }}"
+        maxlength="{{ core()->getConfigData('catalog.products.search.max_query_length') }}"
+        placeholder="@lang('visual-debut::sections.header.blocks.search.placeholder')"
+        aria-label="@lang('visual-debut::sections.header.blocks.search.placeholder')"
+        aria-required="true"
+        pattern="[^\\]+"
+        required
+        class="p-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition duration-200 text-gray-900 placeholder-gray-400"
+    >
+    @if (strlen($query) > 0)
+        @if (count($results))
+            <ul class=" absolute z-10 mt-2 w-full bg-white border border-gray-300 shadow" style="background-color: white !important; max-height: 400px !important; overflow-y: auto;">
+                @foreach ($results as $result)
+                    @php
+                        $image = optional($result->product->images->first())->path;
+                        $imageUrl = $image ? asset('storage/' . $image) : asset('images/default.jpg');
+                    @endphp
+
+                    <li class="flex items-center px-4 py-2 hover:bg-gray-100">
+                        <a href="{{  $result->url_key }}" class="flex items-center w-full">
+                            {{-- Product Image --}}
+                            <img
+                                src="{{ $imageUrl }}"
+                                alt="{{ $result->name }}"
+                                class="object-cover mr-4 h-12 w-12 max-h-12 max-w-12"
+                                style="max-height: 3rem; max-width: 3rem;"
+                            >
+
+                            {{-- Name and Price --}}
+                            <div class="flex flex-col">
+                                <span>{{ $result->name }}</span>
+                                <span class="font-bold">
+                            {{ core()->currency($result->price) }}
+                        </span>
+                            </div>
+                        </a>
+                    </li>
+                @endforeach
+            </ul>
+        @else
+            <div class="absolute z-10 mt-2 w-full bg-white border border-gray-300 shadow px-4 py-2 text-center text-gray-500" style="background-color: white !important;">
+                No results found.
+            </div>
+        @endif
+    @endif
+
+
+</div>

src/Components/Livewire/SearchSuggestions.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace BagistoPlus\VisualDebut\Components\Livewire;
+
+use Livewire\Component;
+use Webkul\Product\Models\ProductFlat;
+
+class SearchSuggestions extends Component
+{
+
+    public $searchIcon;
+    public $query = '';
+    public $results = [];
+
+    public function updatedQuery()
+    {
+        $minLength = 1;
+
+        if (strlen($this->query) >= $minLength) {
+
+            // Split the input into keywords
+            $keywords = preg_split('/\s+/', trim($this->query));
+
+            $this->results = ProductFlat::with(['product.images'])
+                ->where('status', true)
+                ->where(function ($q) use ($keywords) {
+                    foreach ($keywords as $word) {
+                        $q->where('name', 'like', "%{$word}%");
+                    }
+                })
+                ->take(30)
+                ->get();
+
+        } else {
+            $this->results = [];
+        }
+    }
+
+
+    public function render()
+    {
+        return view('livewire.search-suggestions');
+    }
+}