Admin Real-time Product Search

Loydtafireyi · Sep 14, 2020 · 234ef59 · 234ef59
1 parent a0f771f
commit 234ef59
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 36 deletions.
diff --git a/app/Http/Livewire/Admin/SearchBar.php b/app/Http/Livewire/Admin/SearchBar.php
@@ -2,12 +2,24 @@
 
 namespace App\Http\Livewire\Admin;
 
+use App\Product;
 use Livewire\Component;
 
 class SearchBar extends Component
 {
+	public $search = '';
+
     public function render()
     {
-        return view('livewire.admin.search-bar');
+    	$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'));
     }
 }
diff --git a/app/Http/Livewire/SearchDropdown.php b/app/Http/Livewire/SearchDropdown.php
@@ -19,6 +19,8 @@ public function render()
     		$searchResults = Product::with('category')->where('name', 'Like', '%'.$this->search.'%')->get();
     	}
 
+        $searchResults = collect($searchResults)->take(7);
+
     	$systemName = SystemSetting::first();
 
         return view('livewire.search-dropdown', compact('searchResults', 'systemName'));

diff --git a/resources/views/livewire/admin/search-bar.blade.php b/resources/views/livewire/admin/search-bar.blade.php
@@ -1,37 +1,23 @@
 <div class="col-md-5">
-    <input type="text" name="" class="form-control rounded text-center position-relative" placeholder="Search Products">
-    <ul class="list-group position-absolute mt-2 ml-1 col-md-11">
-    	<li class="list-group-item  bg-primary border-bottom">
-    		<a href="" 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">Cakes</h6>
-    			</span>
-    			<img src="{{ asset('frontend/img/blog-thumbs/1.jpg') }}" style="width: 50px; height: 50px; border-radius: 100%;">
-    		</a>
-    	</li>
-    	<li class="list-group-item  bg-primary border-bottom">
-    		<a href="" 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">Cakes</h6>
-    			</span>
-    			<img src="{{ asset('frontend/img/blog-thumbs/1.jpg') }}" style="width: 50px; height: 50px; border-radius: 100%;">
-    		</a>
-    	</li>
-    	<li class="list-group-item  bg-primary border-bottom">
-    		<a href="" 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">Cakes</h6>
-    			</span>
-    			<img src="{{ asset('frontend/img/blog-thumbs/1.jpg') }}" style="width: 50px; height: 50px; border-radius: 100%;">
-    		</a>
-    	</li>
-    	<li class="list-group-item  bg-primary border-bottom">
-    		<a href="" 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">Cakes</h6>
-    			</span>
-    			<img src="{{ asset('frontend/img/blog-thumbs/1.jpg') }}" style="width: 50px; height: 50px; border-radius: 100%;">
-    		</a>
-    	</li>
-    </ul>
+    <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>
+	    			<img src="/storage/{{ $result->photos->first()->images }}" style="width: 50px; height: 50px; border-radius: 100%;">
+	    		</a>
+	    	</li>
+	    	@endforeach
+	    </ul>
+	    @else
+	    <div class="position-aboslute">
+	    	<span><strong>No results for {{ $search }}</strong></span>
+	    </div>
+	    @endif
+    @endif
 </div>