Filters
-
diff --git a/parks/tests/README.md b/parks/tests/README.md
index fa56db1b..e9e1b376 100644
--- a/parks/tests/README.md
+++ b/parks/tests/README.md
@@ -24,21 +24,28 @@ uv run pytest --cov=parks parks/tests/
## Test Coverage
+### Search API Tests
+- `test_search_json_format`: Validates API response structure
+- `test_empty_search_json`: Tests empty search handling
+- `test_search_format_validation`: Verifies all required fields and types
+- `test_suggestion_limit`: Confirms 8-item result limit
+
### Search Functionality Tests
- `test_autocomplete_results`: Validates real-time suggestion filtering
-- `test_search_form_valid`: Ensures form validation works
-- `test_autocomplete_class`: Verifies autocomplete configuration
-- `test_search_with_filters`: Tests filter integration
+- `test_search_with_filters`: Tests filter integration with search
+- `test_partial_match_search`: Verifies partial text matching works
-### Integration Tests
-- `test_empty_search`: Tests default behavior
-- `test_partial_match_search`: Validates partial text matching
-- `test_htmx_request_handling`: Ensures HTMX compatibility
-- `test_view_mode_persistence`: Verifies view state preservation
+### UI Integration Tests
+- `test_view_mode_persistence`: Ensures view mode is maintained
+- `test_empty_search`: Tests default state behavior
+- `test_htmx_request_handling`: Validates HTMX interactions
-### Performance Tests
-- `test_suggestion_limit`: Verifies 8-item limit on suggestions
-- `test_search_debounce`: Confirms proper debounce headers
+### Data Format Tests
+- Field types validation
+- Location formatting
+- Status display formatting
+- URL generation
+- Response structure
### Frontend Integration
- HTMX partial updates
diff --git a/parks/tests/test_search.py b/parks/tests/test_search.py
index 81adb60e..11437577 100644
--- a/parks/tests/test_search.py
+++ b/parks/tests/test_search.py
@@ -117,12 +117,67 @@ class TestParkSearch:
result_count = content.count('Test Park')
assert result_count == 8 # Verify limit is enforced
- def test_search_debounce(self, client: Client):
- """Test that search has proper headers for debouncing"""
- Park.objects.create(name="Test Park")
-
+ 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
- assert 'HX-Trigger' in response
+ 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']
diff --git a/parks/views_search.py b/parks/views_search.py
index 3e2de7f6..09bf87f1 100644
--- a/parks/views_search.py
+++ b/parks/views_search.py
@@ -33,18 +33,22 @@ class ParkSearchView(TemplateView):
return context
-def suggest_parks(request: HttpRequest) -> HttpResponse:
- """Return park search suggestions using HTMX."""
+def suggest_parks(request: HttpRequest) -> JsonResponse:
+ """Return park search suggestions as JSON."""
query = request.GET.get('search', '').strip()
if not query:
- return HttpResponse('')
+ return JsonResponse({'results': []})
queryset = get_base_park_queryset()
filter_instance = ParkFilter({'search': query}, queryset=queryset)
parks = filter_instance.qs[:8] # Limit to 8 suggestions
- return render(
- request,
- "parks/partials/park_suggestions.html",
- {"parks": parks, "query": query}
- )
\ No newline at end of file
+ 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})
\ No newline at end of file
diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 00000000..b6589dbd
--- /dev/null
+++ b/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'));
+ }
+ };
+}
\ No newline at end of file