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.

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>

templates/partials/homepage/search_results.html

@@ -173,20 +173,37 @@
         {% 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>