Refactor as food-specific picker

app/Http/Livewire/FoodPicker.php

@@ -2,11 +2,11 @@
 
 namespace App\Http\Livewire;
 
+use App\Models\Food;
 use Livewire\Component;
 
-class Picker extends Component
+class FoodPicker extends Component
 {
-    public string $model;
     public string $term = '';
 
     /**
@@ -17,10 +17,10 @@ class Picker extends Component
     public function render()
     {
         if (!empty($this->term)) {
-            $results = $this->model::search($this->term);
+            $foods = Food::search($this->term);
         } else {
-            $results = [];
+            $foods = [];
         }
-        return view('livewire.picker')->with('results', $results);
+        return view('livewire.food-picker')->with('foods', $foods);
     }
 }

resources/views/livewire/food-picker.blade.php

@@ -0,0 +1,39 @@
+<div x-data="{isTyped: false}">
+    <div>
+        <div>
+            <x-inputs.input type="text"
+                            name="food"
+                            placeholder="{{__('Search ...')}}"
+                            x-on:input.debounce.400ms="isTyped = ($event.target.value != '')"
+                            x-on:focusout="isTyped = false; $event.target.value = ''"
+                            autocomplete="off"
+                            wire:model.debounce.500ms="term"
+                            aria-label="Search input" />
+        </div>
+        <div x-show="isTyped" x-cloak>
+            <div class="absolute border-2 border-gray-500 border-b-0 bg-white">
+                @forelse($foods as $food)
+                    <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer">
+                        <div class="text">
+                            {{ $food->name }}@if($food->detail), <span class="text-gray-500">{{ $food->detail }}</span>@endif
+                        </div>
+                        @if($food->brand)
+                            <div class="text-sm text-gray-600">
+                                {{ $food->brand }}
+                            </div>
+                        @endif
+                        <div class="text-sm">
+                            Serving size {{ \App\Support\Number::fractionStringFromFloat($food->serving_size) }}
+                            {{ $food->serving_unit }}
+                            ({{ $food->serving_weight }}g)
+                        </div>
+                    </div>
+                @empty
+                    <div class="border-b-2 border-gray-500" x-cloak>
+                        No results found.
+                    </div>
+                @endforelse
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/picker.blade.php

@@ -1,31 +0,0 @@
-<div x-data="{isTyped: false}">
-    <div>
-        <div>
-            <x-inputs.input type="text"
-                            name="picker"
-                            placeholder="{{__('Search ...')}}"
-                            x-on:input.debounce.400ms="isTyped = ($event.target.value != '')"
-                            autocomplete="off"
-                            wire:model.debounce.500ms="term"
-                            aria-label="Search input" />
-        </div>
-        <!-- TODO: Implement as a library like Select2 or Chosen. -->
-        <div x-show="isTyped" x-cloak>
-            <div class="absolute bg-white">
-                @forelse($results as $result)
-                    <div class="p-1 hover:bg-yellow-300 cursor-pointer">
-                        <ul>
-                            <li>
-                                {{ Str::limit($result->name, 40) }}
-                            </li>
-                        </ul>
-                    </div>
-                @empty
-                    <div x-cloak>
-                        No results found.
-                    </div>
-                @endforelse
-            </div>
-        </div>
-    </div>
-</div>

resources/views/recipes/edit.blade.php

@@ -91,7 +91,7 @@
 {{--                                                 :selectedValue="old('foods.' . $i, $food_id)">--}}
 {{--                                    <option value=""></option>--}}
 {{--                                </x-inputs.select>--}}
-                                <livewire:picker model="\App\Models\Food">
+                                <livewire:food-picker>
                                 <x-inputs.input type="text"
                                                 class="block"
                                                 name="foods_detail[]"