Use `x-spread` for ingredients picker JS

resources/views/components/ingredient-picker.blade.php

@@ -1,4 +1,4 @@
-<div x-data="{ searching: false, results: [] }">
+<div x-data="picker()">
     <div>
         <div>
             <x-inputs.input type="hidden"
@@ -10,16 +10,12 @@
                             value="{{ $defaultName ?? '' }}"
                             placeholder="Search..."
                             autocomplete="off"
-                            x-on:input.debounce.400ms="if ($event.target.value != '') {
+                            x-ref="ingredients_name"
-                                fetch('{{ route('ingredient-picker.search') }}?term=' + $event.target.value)
+                            x-spread="search" />
-                                  .then(response => response.json())
-                                  .then(data => { results = data; searching = true; }); }"
-                            x-on:focusout.debounce.200ms="searching = false;"
-                            x-ref="ingredients_name" />
         </div>
         <div x-show="searching" x-cloak>
             <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
-                 x-on:click="selected = $event.target; if (selected.dataset.id) { $refs.ingredients_name.value = selected.dataset.value; $refs.ingredients.value = selected.dataset.id; searching = false; }">
+                 x-spread="ingredient">
                 <template x-for="result in results" :key="result.id">
                     <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer"
                          x-bind:data-id="result.id"
@@ -44,3 +40,39 @@
         </div>
     </div>
 </div>
+
+
+@once
+    @push('scripts')
+        <script type="text/javascript">
+            let picker = () => {
+                return {
+                    searching: false,
+                    results: [],
+                    search: {
+                        ['@input.debounce.400ms']($event) {
+                            if ($event.target.value !== '') {
+                                fetch('{{ route('ingredient-picker.search') }}?term=' + $event.target.value)
+                                    .then(response => response.json())
+                                    .then(data => { this.results = data; this.searching = true; });
+                            }
+                        },
+                        ['@focusout.debounce.200ms']() {
+                            this.searching = false;
+                        }
+                    },
+                    ingredient: {
+                        ['@click']($event) {
+                            let selected = $event.target;
+                            if (selected.dataset.id) {
+                                this.$refs.ingredients_name.value = selected.dataset.value;
+                                this.$refs.ingredients.value = selected.dataset.id;
+                                this.searching = false;
+                            }
+                        }
+                    }
+                }
+            }
+        </script>
+    @endpush
+@endonce

resources/views/layouts/app.blade.php

@@ -50,6 +50,6 @@
             </main>
         </div>
 
-        @isset($scripts) {{ $scripts }} @endisset
+        @stack('scripts')
     </body>
 </html>