From e53414d795ec8595533e7b5e8446da91a745ad83 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Fri, 26 Sep 2025 14:39:15 -0400
Subject: [PATCH] Refactor park search results and search suggestions to
 utilize Alpine.js for improved state management. Enhanced event handling and
 user experience by replacing legacy JavaScript functions with Alpine.js
 reactive methods.

---
 .../parks/partials/park_search_results.html   | 35 +++++++++++++------
 .../partials/homepage/search_results.html     | 27 +++++++++++---
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/templates/parks/partials/park_search_results.html b/templates/parks/partials/park_search_results.html
index 1c6677c3..c0673464 100644
--- a/templates/parks/partials/park_search_results.html
+++ b/templates/parks/partials/park_search_results.html
@@ -1,9 +1,32 @@
-<div class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" style="max-height: 240px; overflow-y: auto;">
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('parkSearchResults', () => ({
+        selectPark(id, name) {
+            // Update park fields using AlpineJS reactive approach
+            const parkInput = this.$el.closest('form').querySelector('#id_park');
+            const searchInput = this.$el.closest('form').querySelector('#id_park_search');
+            const resultsDiv = this.$el.closest('form').querySelector('#park-search-results');
+            
+            if (parkInput) parkInput.value = id;
+            if (searchInput) searchInput.value = name;
+            if (resultsDiv) resultsDiv.innerHTML = '';
+            
+            // Dispatch custom event for parent component
+            this.$dispatch('park-selected', { id, name });
+        }
+    }));
+});
+</script>
+
+<div x-data="parkSearchResults()" 
+     @click.outside="$el.innerHTML = ''"
+     class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" 
+     style="max-height: 240px; overflow-y: auto;">
     {% if parks %}
         {% for park in parks %}
             <button type="button"
                     class="w-full px-4 py-2 text-left text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-                    onclick="selectPark('{{ park.id }}', '{{ park.name|escapejs }}')">
+                    @click="selectPark('{{ park.id }}', '{{ park.name|escapejs }}')">
                 {{ park.name }}
             </button>
         {% endfor %}
@@ -17,11 +40,3 @@
         </div>
     {% endif %}
 </div>
-
-<script>
-function selectPark(id, name) {
-    document.getElementById('id_park').value = id;
-    document.getElementById('id_park_search').value = name;
-    document.getElementById('park-search-results').innerHTML = '';
-}
-</script>
diff --git a/templates/partials/homepage/search_results.html b/templates/partials/homepage/search_results.html
index 34ccdc28..9961cf3e 100644
--- a/templates/partials/homepage/search_results.html
+++ b/templates/partials/homepage/search_results.html
@@ -173,22 +173,39 @@
         {% endif %}
         
         <!-- Search Suggestions -->
-        <div class="flex flex-wrap gap-2 justify-center">
+        <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('searchSuggestions', () => ({
+                fillSearchInput(value) {
+                    // Find the search input using AlpineJS approach
+                    const searchInput = document.querySelector('input[type=text]');
+                    if (searchInput) {
+                        searchInput.value = value;
+                        // Dispatch input event to trigger search
+                        searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+                        searchInput.focus();
+                    }
+                }
+            }));
+        });
+        </script>
+        
+        <div x-data="searchSuggestions()" class="flex flex-wrap gap-2 justify-center">
             <span class="text-xs text-muted-foreground">Try:</span>
             <button class="text-xs text-primary hover:text-primary/80 transition-colors" 
-                    onclick="document.querySelector('input[type=text]').value='Disney'; document.querySelector('input[type=text]').dispatchEvent(new Event('input'));">
+                    @click="fillSearchInput('Disney')">
                 Disney
             </button>
             <span class="text-xs text-muted-foreground">•</span>
             <button class="text-xs text-primary hover:text-primary/80 transition-colors"
-                    onclick="document.querySelector('input[type=text]').value='roller coaster'; document.querySelector('input[type=text]').dispatchEvent(new Event('input'));">
+                    @click="fillSearchInput('roller coaster')">
                 Roller Coaster
             </button>
             <span class="text-xs text-muted-foreground">•</span>
             <button class="text-xs text-primary hover:text-primary/80 transition-colors"
-                    onclick="document.querySelector('input[type=text]').value='Cedar Point'; document.querySelector('input[type=text]').dispatchEvent(new Event('input'));">
+                    @click="fillSearchInput('Cedar Point')">
                 Cedar Point
             </button>
         </div>
     </div>
-{% endif %}
\ No newline at end of file
+{% endif %}