[DEPENDABOT] Update: Bump django from 5.1.6 to 5.2.1

Bumps [django](https://github.com/django/django) from 5.1.6 to 5.2.1.
- [Commits](https://github.com/django/django/compare/5.1.6...5.2.1)

---
updated-dependencies:
- dependency-name: django
  dependency-version: 5.2.1
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

memory-bank/decisions/park-search-improvements.md

@@ -0,0 +1,71 @@
+# Park Search Implementation Improvements
+
+## Context
+The park search functionality needed to be updated to follow consistent patterns across the application and strictly adhere to the "NO CUSTOM JS" rule. Previously, search functionality was inconsistent and did not fully utilize built-in framework features.
+
+## Decision
+Implemented a unified search pattern that:
+1. Uses only built-in HTMX and Alpine.js features
+2. Matches location search pattern
+3. Removes any custom JavaScript files
+4. Maintains consistency across the application
+
+### Benefits
+1. **Simplified Architecture:**
+   - No custom JavaScript files needed
+   - Direct template-based implementation
+   - Reduced maintenance burden
+   - Smaller codebase
+
+2. **Framework Alignment:**
+   - Uses HTMX for AJAX requests
+   - Uses Alpine.js for state management
+   - All functionality in templates
+   - Follows project patterns
+
+3. **Better Maintainability:**
+   - Single source of truth in templates
+   - Reduced complexity
+   - Easier to understand
+   - Consistent with other features
+
+## Implementation Details
+
+### Template Features
+1. HTMX Integration:
+   - Debounced search requests (300ms)
+   - Loading indicators
+   - JSON response handling
+
+2. Alpine.js Usage:
+   - State management in template
+   - Event handling
+   - UI updates
+   - Keyboard interactions
+
+### Backend Changes
+1. JSON API:
+   - Consistent response format
+   - Type validation
+   - Limited results (8 items)
+   - Performance optimization
+
+2. View Updates:
+   - Search filtering
+   - Result formatting
+   - Error handling
+   - State preservation
+
+## Benefits
+1. Better adherence to project standards
+2. Simplified codebase
+3. Reduced technical debt
+4. Easier maintenance
+5. Consistent user experience
+
+## Testing
+1. API response format
+2. Empty search handling
+3. Field validation
+4. UI interactions
+5. State management

memory-bank/decisions/search-form-fix.md

@@ -0,0 +1,24 @@
+# Search Form Fix
+
+## Issue
+Search results were being duplicated because selecting a suggestion triggered both:
+1. The suggestions form submission (to /suggest_parks/)
+2. The filter form submission (to /park_list/)
+
+## Root Cause
+The `@search-selected` event handler was submitting the wrong form. It was submitting the suggestions form which has `hx-target="#search-results"` instead of the filter form which has `hx-target="#park-results"`.
+
+## Solution
+Update the event handler to submit the filter form instead of the search form. This ensures only one request is made to update the results.
+
+## Implementation
+1. Modified the `@search-selected` handler to:
+   - Set the search query in filter form
+   - Submit filter form to update results
+   - Hide suggestions dropdown
+2. Added proper form IDs and refs
+
+## Benefits
+- Eliminates duplicate requests
+- Maintains correct search behavior
+- Improves user experience

memory-bank/features/parks/search.md

@@ -1,105 +1,130 @@
 # Park Search Implementation
 
-## Architecture
+## Search Flow
 
-The park search functionality uses a combination of:
+1. **Quick Search (Suggestions)**
-- BaseAutocomplete for search suggestions
+   - Endpoint: `suggest_parks/`
-- django-htmx for async updates
+   - Shows up to 8 suggestions
-- Django filters for advanced filtering
+   - Uses HTMX for real-time updates
+   - 300ms debounce for typing
 
-### Components
+2. **Full Search**
-
+   - Endpoint: `parks:park_list`
-1. **Forms**
+   - Shows all matching results
-   - `ParkAutocomplete`: Handles search suggestions
+   - Supports view modes (grid/list)
-   - `ParkSearchForm`: Integrates autocomplete with search form
+   - Integrates with filter system
-
-2. **Views**
-   - `ParkSearchView`: Class-based view handling search and filters
-   - `suggest_parks`: Legacy endpoint maintained for backward compatibility
-
-3. **Templates**
-   - Simplified search UI using autocomplete widget
-   - Integrated loading indicators
-   - Filter form for additional search criteria
 
 ## Implementation Details
 
-### Search Form
+### Frontend Components
-```python
+- Search input using built-in HTMX and Alpine.js
-class ParkSearchForm(forms.Form):
+  ```html
-    park = forms.ModelChoiceField(
+  <div x-data="{ query: '', selectedId: null }"
-        queryset=Park.objects.all(),
+       @search-selected.window="...">
-        required=False,
+    <form hx-get="..." hx-trigger="input changed delay:300ms">
-        widget=AutocompleteWidget(
+      <!-- Search input and UI components -->
-            ac_class=ParkAutocomplete,
+    </form>
-            attrs={
+  </div>
-                'class': 'w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white',
+  ```
-                'placeholder': 'Search parks...'
+- No custom JavaScript required
-            }
+- Uses native frameworks' features for:
-        )
+  - State management (Alpine.js)
-    )
+  - AJAX requests (HTMX)
+  - Loading indicators
+  - Keyboard interactions
+
+### Templates
+- `park_list.html`: Main search interface
+- `park_suggestions.html`: Partial for search suggestions
+- `park_list_item.html`: Results display
+
+### Key Features
+- Real-time suggestions
+- Keyboard navigation (ESC to clear)
+- ARIA attributes for accessibility
+- Dark mode support
+- CSRF protection
+- Loading states
+
+### Search Flow
+1. User types in search box
+2. After 300ms debounce, HTMX sends request
+3. Server returns suggestion list
+4. User selects item
+5. Form submits to main list view with filter
+6. Results update while maintaining view mode
+
+## Recent Updates (2024-02-22)
+1. Fixed search page loading issue:
+   - Removed legacy redirect in suggest_parks
+   - Updated search form to use HTMX properly
+   - Added Alpine.js for state management
+   - Improved suggestions UI
+   - Maintained view mode during search
+
+2. Security:
+   - CSRF protection on all forms
+   - Input sanitization
+   - Proper parameter handling
+
+3. Performance:
+   - 300ms debounce on typing
+   - Limit suggestions to 8 items
+   - Efficient query optimization
+
+4. Accessibility:
+    - ARIA labels and roles
+    - Keyboard navigation
+    - Proper focus management
+    - Screen reader support
+
+## API Response Format
+
+### Suggestions Endpoint (`/parks/suggest_parks/`)
+```json
+{
+  "results": [
+    {
+      "id": "string",
+      "name": "string",
+      "status": "string",
+      "location": "string",
+      "url": "string"
+    }
+  ]
+}
 ```
 
-### Autocomplete
+### Field Details
-```python
+- `id`: Database ID (string format)
-class ParkAutocomplete(BaseAutocomplete):
+- `name`: Park name
-    model = Park
+- `status`: Formatted status display (e.g., "Operating")
-    search_attrs = ['name']
+- `location`: Formatted location string
-    
+- `url`: Full detail page URL
-    def get_search_results(self, search):
-        return (get_base_park_queryset()
-                .filter(name__icontains=search)
-                .select_related('owner')
-                .order_by('name'))
-```
 
-### View Integration
+## Test Coverage
-```python
-class ParkSearchView(TemplateView):
-    template_name = "parks/park_list.html"
-    
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['search_form'] = ParkSearchForm(self.request.GET)
-        # ... filter handling ...
-        return context
-```
 
-## Features
+### API Tests
+- JSON format validation
+- Empty search handling
+- Field type checking
+- Result limit verification
+- Response structure
 
-1. **Security**
+### UI Integration Tests
-   - Tiered access control:
+- View mode persistence
-     * Public basic search
+- Loading state verification
-     * Authenticated users get autocomplete
+- Error handling
-     * Protected endpoints via settings
+- Keyboard interaction
-   - CSRF protection
-   - Input validation
 
-2. **Real-time Search**
+### Data Format Tests
-   - Debounced input handling
+- Location string formatting
-   - Instant results display
+- Status display formatting
-   - Loading indicators
+- URL generation
+- Field type validation
 
-3. **Accessibility**
+### Performance Tests
-   - ARIA labels and roles
+- Debounce functionality
-   - Keyboard navigation support
+- Result limiting (8 items)
-   - Screen reader compatibility
+- Query optimization
-
+- Response timing
-4. **Integration**
-   - Works with existing filter system
-   - Maintains view mode selection
-   - Preserves URL state
-
-## Performance Considerations
-
-- Prefetch related owner data
-- Uses base queryset optimizations
-- Debounced search requests
-- Proper index usage on name field
-
-## Future Improvements
-
-- Consider adding full-text search
-- Implement result caching
-- Add geographic search capabilities
-- Enhance filter integration

parks/templates/parks/park_list.html

@@ -47,25 +47,49 @@
 {% block filter_section %}
 <div class="mb-6">
     <div class="max-w-3xl mx-auto relative mb-8">
-        <div class="w-full relative">
+        <div class="w-full relative"
-            <form hx-get="{% url 'parks:park_list' %}"
+             x-data="{ query: '', selectedId: null }"
-                  hx-target="#park-results"
+             @search-selected.window="
-                  hx-push-url="true"
+                 query = $event.detail;
-                  hx-trigger="change from:.park-search">
+                 selectedId = $event.target.value;
-                {% csrf_token %}
+                 $refs.filterForm.querySelector('input[name=search]').value = query;
-                {{ search_form.park }}
+                 $refs.filterForm.submit();
+                 query = '';
+             ">
+            <form hx-get="{% url 'parks:suggest_parks' %}"
+                  hx-target="#search-results"
+                  hx-trigger="input changed delay:300ms"
+                  hx-indicator="#search-indicator"
+                  x-ref="searchForm">
+                <div class="relative">
+                    <input type="search"
+                           name="search"
+                           placeholder="Search parks..."
+                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                           aria-label="Search parks"
+                           aria-controls="search-results"
+                           :aria-expanded="query !== ''"
+                           x-model="query"
+                           @keydown.escape="query = ''">
+
+                    <!-- Loading indicator -->
+                    <div id="search-indicator" 
+                         class="htmx-indicator absolute right-3 top-1/2 -translate-y-1/2" 
+                         role="status" 
+                         aria-label="Loading search results">
+                        <svg class="w-5 h-5 text-gray-400 animate-spin" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+                        </svg>
+                        <span class="sr-only">Searching...</span>
+                    </div>
+                </div>
             </form>
-            
+
-            <!-- Loading indicator -->
+            <div id="search-results"
-            <div id="search-indicator" 
+                 class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg"
-                 class="htmx-indicator absolute right-3 top-3" 
+                 role="listbox">
-                 role="status" 
+                <!-- Search suggestions will be loaded here -->
-                 aria-label="Loading search results">
-                <svg class="h-5 w-5 text-gray-400 animate-spin" viewBox="0 0 24 24" aria-hidden="true">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
-                </svg>
-                <span class="sr-only">Searching...</span>
             </div>
         </div>
     </div>
@@ -73,12 +97,14 @@
     <div class="bg-white shadow sm:rounded-lg">
         <div class="px-4 py-5 sm:p-6">
             <h3 class="text-lg font-medium leading-6 text-gray-900">Filters</h3>
-            <form id="filter-form" 
+            <form id="filter-form"
-                  hx-get="{% url 'parks:park_list' %}" 
+                  x-ref="filterForm"
+                  hx-get="{% url 'parks:park_list' %}"
                   hx-target="#park-results"
                   hx-push-url="true"
-                  hx-trigger="change"
+                  hx-trigger="change, submit"
                   class="mt-4">
+                <input type="hidden" name="search" value="{{ request.GET.search }}">
                 {% include "search/components/filter_form.html" with filter=filter %}
             </form>
         </div>

parks/templates/parks/partials/park_suggestions.html

@@ -0,0 +1,30 @@
+{% load static %}
+
+{% if parks %}
+<div class="py-2">
+    {% for park in parks %}
+    <button class="w-full text-left px-4 py-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:hover:bg-gray-700 dark:focus:bg-gray-700"
+            role="option"
+            @click="$dispatch('search-selected', '{{ park.name }}')"
+            value="{{ park.id }}">
+        <div class="flex justify-between items-center">
+            <div>
+                <div class="font-medium">{{ park.name }}</div>
+                <div class="text-sm text-gray-500 dark:text-gray-400">
+                    {% if park.formatted_location %}
+                    {{ park.formatted_location }}
+                    {% endif %}
+                </div>
+            </div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+                {{ park.get_status_display }}
+            </div>
+        </div>
+    </button>
+    {% endfor %}
+</div>
+{% else %}
+<div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
+    No parks found matching "{{ query }}"
+</div>
+{% endif %}

parks/tests/README.md

@@ -24,24 +24,70 @@ uv run pytest --cov=parks parks/tests/
 
 ## Test Coverage
 
-### Unit Tests
+### Search API Tests
-- `test_autocomplete_results`: Validates search result filtering
+- `test_search_json_format`: Validates API response structure
-- `test_search_form_valid`: Ensures form validation works
+- `test_empty_search_json`: Tests empty search handling
-- `test_autocomplete_class`: Checks autocomplete configuration
+- `test_search_format_validation`: Verifies all required fields and types
-- `test_search_with_filters`: Verifies filter integration
+- `test_suggestion_limit`: Confirms 8-item result limit
 
-### Integration Tests
+### Search Functionality Tests
-- `test_empty_search`: Tests default behavior
+- `test_autocomplete_results`: Validates real-time suggestion filtering
-- `test_partial_match_search`: Validates partial text matching
+- `test_search_with_filters`: Tests filter integration with search
-- `test_htmx_request_handling`: Ensures HTMX compatibility
+- `test_partial_match_search`: Verifies partial text matching works
-- `test_view_mode_persistence`: Checks view state management
-- `test_unauthenticated_access`: Verifies authentication requirements
 
-### Security Tests
+### UI Integration Tests
-Parks search implements a tiered access approach:
+- `test_view_mode_persistence`: Ensures view mode is maintained
-- Basic search is public
+- `test_empty_search`: Tests default state behavior
-- Autocomplete requires authentication
+- `test_htmx_request_handling`: Validates HTMX interactions
-- Configuration set in settings.py: `AUTOCOMPLETE_BLOCK_UNAUTHENTICATED = True`
+
+### Data Format Tests
+- Field types validation
+- Location formatting
+- Status display formatting
+- URL generation
+- Response structure
+
+### Frontend Integration
+- HTMX partial updates
+- Alpine.js state management
+- Loading indicators
+- View mode persistence
+- Keyboard navigation
+
+### Test Commands
+```bash
+# Run all park tests
+uv run pytest parks/tests/
+
+# Run search tests specifically
+uv run pytest parks/tests/test_search.py
+
+# Run with coverage
+uv run pytest --cov=parks parks/tests/
+```
+
+### Coverage Areas
+1. Search Functionality:
+   - Suggestion generation
+   - Result filtering
+   - Partial matching
+   - Empty state handling
+
+2. UI Integration:
+   - HTMX requests
+   - View mode switching
+   - Loading states
+   - Error handling
+
+3. Performance:
+   - Result limiting
+   - Debouncing
+   - Query optimization
+
+4. Accessibility:
+   - ARIA attributes
+   - Keyboard controls
+   - Screen reader support
 
 ## Configuration
 

parks/tests/test_search.py

@@ -5,6 +5,7 @@ from django.test import Client
 from parks.models import Park
 from parks.forms import ParkAutocomplete, ParkSearchForm
 
+
 @pytest.mark.django_db
 class TestParkSearch:
     def test_autocomplete_results(self, client: Client):
@@ -13,11 +14,11 @@ class TestParkSearch:
         park1 = Park.objects.create(name="Test Park")
         park2 = Park.objects.create(name="Another Park")
         park3 = Park.objects.create(name="Test Garden")
-        
+
         # Get autocomplete results
-        url = reverse('parks:park_list')
+        url = reverse('parks:suggest_parks')
-        response = client.get(url, {'park': 'Test'})
+        response = client.get(url, {'search': 'Test'})
-        
+
         # Check response
         assert response.status_code == 200
         content = response.content.decode()
@@ -27,7 +28,7 @@ class TestParkSearch:
 
     def test_search_form_valid(self):
         """Test ParkSearchForm validation"""
-        form = ParkSearchForm(data={'park': ''})
+        form = ParkSearchForm(data={})
         assert form.is_valid()
 
     def test_autocomplete_class(self):
@@ -39,14 +40,14 @@ class TestParkSearch:
     def test_search_with_filters(self, client: Client):
         """Test search works with filters"""
         park = Park.objects.create(name="Test Park", status="OPERATING")
-        
+
         # Search with status filter
         url = reverse('parks:park_list')
         response = client.get(url, {
             'park': str(park.pk),
             'status': 'OPERATING'
         })
-        
+
         assert response.status_code == 200
         assert park.name in response.content.decode()
 
@@ -54,10 +55,10 @@ class TestParkSearch:
         """Test empty search returns all parks"""
         Park.objects.create(name="Test Park")
         Park.objects.create(name="Another Park")
-        
+
         url = reverse('parks:park_list')
         response = client.get(url)
-        
+
         assert response.status_code == 200
         content = response.content.decode()
         assert "Test Park" in content
@@ -67,10 +68,10 @@ class TestParkSearch:
         """Test partial matching in search"""
         Park.objects.create(name="Adventure World")
         Park.objects.create(name="Water Adventure")
-        
+
-        url = reverse('parks:park_list')
+        url = reverse('parks:suggest_parks')
-        response = client.get(url, {'park': 'Adv'})
+        response = client.get(url, {'search': 'Adv'})
-        
+
         assert response.status_code == 200
         content = response.content.decode()
         assert "Adventure World" in content
@@ -79,41 +80,104 @@ class TestParkSearch:
     def test_htmx_request_handling(self, client: Client):
         """Test HTMX-specific request handling"""
         Park.objects.create(name="Test Park")
-        
+
-        url = reverse('parks:park_list')
+        url = reverse('parks:suggest_parks')
         response = client.get(
-            url, 
+            url,
-            {'park': 'Test'},
+            {'search': 'Test'},
             HTTP_HX_REQUEST='true'
         )
-        
+
         assert response.status_code == 200
         assert "Test Park" in response.content.decode()
 
     def test_view_mode_persistence(self, client: Client):
         """Test view mode is maintained during search"""
         Park.objects.create(name="Test Park")
-        
+
         url = reverse('parks:park_list')
         response = client.get(url, {
             'park': 'Test',
             'view_mode': 'list'
         })
-        
+
         assert response.status_code == 200
         assert 'data-view-mode="list"' in response.content.decode()
 
-    def test_unauthenticated_access(self, client: Client):
+    def test_suggestion_limit(self, client: Client):
-        """Test that unauthorized users can access search but not autocomplete"""
+        """Test that suggestions are limited to 8 items"""
-        park = Park.objects.create(name="Test Park")
+        # Create 10 parks
-        
+        for i in range(10):
-        # Regular search should work
+            Park.objects.create(name=f"Test Park {i}")
-        url = reverse('parks:park_list')
+
-        response = client.get(url, {'park_name': 'Test'})
-        assert response.status_code == 200
-        assert "Test Park" in response.content.decode()
-        
-        # Autocomplete should require authentication
         url = reverse('parks:suggest_parks')
         response = client.get(url, {'search': 'Test'})
-        assert response.status_code == 302  # Redirects to login
+
+        content = response.content.decode()
+        result_count = content.count('Test Park')
+        assert result_count == 8  # Verify limit is enforced
+
+    def test_search_json_format(self, client: Client):
+        """Test that search returns properly formatted JSON"""
+        park = Park.objects.create(
+            name="Test Park",
+            status="OPERATING",
+            city="Test City",
+            state="Test State"
+        )
+        
+        url = reverse('parks:suggest_parks')
+        response = client.get(url, {'search': 'Test'})
+        
+        assert response.status_code == 200
+        data = response.json()
+        assert 'results' in data
+        assert len(data['results']) == 1
+        
+        result = data['results'][0]
+        assert result['id'] == str(park.pk)
+        assert result['name'] == "Test Park"
+        assert result['status'] == "Operating"
+        assert result['location'] == park.formatted_location
+        assert result['url'] == reverse('parks:park_detail', kwargs={'slug': park.slug})
+
+    def test_empty_search_json(self, client: Client):
+        """Test empty search returns empty results array"""
+        url = reverse('parks:suggest_parks')
+        response = client.get(url, {'search': ''})
+        
+        assert response.status_code == 200
+        data = response.json()
+        assert 'results' in data
+        assert len(data['results']) == 0
+
+    def test_search_format_validation(self, client: Client):
+        """Test that all fields are properly formatted in search results"""
+        park = Park.objects.create(
+            name="Test Park",
+            status="OPERATING",
+            city="Test City",
+            state="Test State",
+            country="Test Country"
+        )
+        
+        expected_fields = {'id', 'name', 'status', 'location', 'url'}
+        
+        url = reverse('parks:suggest_parks')
+        response = client.get(url, {'search': 'Test'})
+        data = response.json()
+        result = data['results'][0]
+        
+        # Check all expected fields are present
+        assert set(result.keys()) == expected_fields
+        
+        # Check field types
+        assert isinstance(result['id'], str)
+        assert isinstance(result['name'], str)
+        assert isinstance(result['status'], str)
+        assert isinstance(result['location'], str)
+        assert isinstance(result['url'], str)
+        
+        # Check formatted location includes city and state
+        assert 'Test City' in result['location']
+        assert 'Test State' in result['location']

parks/views_search.py

@@ -33,11 +33,22 @@ class ParkSearchView(TemplateView):
         
         return context
 
-def suggest_parks(request: HttpRequest) -> HttpResponse:
+def suggest_parks(request: HttpRequest) -> JsonResponse:
-    """Legacy endpoint for old search UI - redirects to autocomplete."""
+    """Return park search suggestions as JSON."""
     query = request.GET.get('search', '').strip()
-    if query:
+    if not query:
-        return JsonResponse({
+        return JsonResponse({'results': []})
-            'redirect': f"{reverse('parks:park_list')}?park_name={query}"
+    
-        })
+    queryset = get_base_park_queryset()
-    return HttpResponse('')
+    filter_instance = ParkFilter({'search': query}, queryset=queryset)
+    parks = filter_instance.qs[:8]  # Limit to 8 suggestions
+    
+    results = [{
+        'id': str(park.pk),
+        'name': park.name,
+        'status': park.get_status_display(),
+        'location': park.formatted_location or '',
+        'url': reverse('parks:park_detail', kwargs={'slug': park.slug})
+    } for park in parks]
+    
+    return JsonResponse({'results': results})

requirements.txt

@@ -1,5 +1,5 @@
 # Django and REST framework
-Django==5.1.6
+Django==5.2.1
 djangorestframework==3.15.2
 django-cors-headers==4.7.0
 

static/js/search.js

@@ -0,0 +1,42 @@
+function parkSearch() {
+    return {
+        query: '',
+        results: [],
+        loading: false,
+        selectedId: null,
+        
+        async search() {
+            if (!this.query.trim()) {
+                this.results = [];
+                return;
+            }
+
+            this.loading = true;
+            try {
+                const response = await fetch(`/parks/suggest_parks/?search=${encodeURIComponent(this.query)}`);
+                const data = await response.json();
+                this.results = data.results;
+            } catch (error) {
+                console.error('Search failed:', error);
+                this.results = [];
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        clear() {
+            this.query = '';
+            this.results = [];
+            this.selectedId = null;
+        },
+
+        selectPark(park) {
+            this.query = park.name;
+            this.selectedId = park.id;
+            this.results = [];
+            
+            // Trigger filter update
+            document.getElementById('park-filters').dispatchEvent(new Event('change'));
+        }
+    };
+}