Add autocomplete functionality for parks: implement URLs, views, and templates for real-time suggestions

parks/autocomplete.py

@@ -0,0 +1,15 @@
+from autocomplete import ModelAutocomplete
+from .models import Park
+
+
+class ParkAutocomplete(ModelAutocomplete):
+    """Autocomplete class for Park model."""
+    model = Park
+    search_attrs = ['name', 'city', 'state', 'country']  # Fields to search
+    minimum_search_length = 2  # Start searching after 2 characters
+    max_results = 8  # Limit to 8 suggestions
+    
+    # Customize display text
+    no_result_text = "No parks found matching your search."
+    narrow_search_text = "Showing %(page_size)s of %(total)s parks. Try narrowing your search."
+    type_at_least_n_characters = "Type at least %(n)s characters to search parks"

parks/forms.py

@@ -1,14 +1,13 @@
 from django import forms
 from decimal import Decimal, InvalidOperation, ROUND_DOWN
-from autocomplete import AutocompleteWidget
+from autocomplete import ModelAutocomplete, AutocompleteWidget
 
-from core.forms import BaseAutocomplete
 from .models import Park
 from location.models import Location
 from .querysets import get_base_park_queryset
 
 
-class ParkAutocomplete(BaseAutocomplete):
+class ParkAutocomplete(ModelAutocomplete):
     """Autocomplete for searching parks.
     
     Features:
@@ -19,6 +18,8 @@ class ParkAutocomplete(BaseAutocomplete):
     """
     model = Park
     search_attrs = ['name']  # We'll match on park names
+    minimum_search_length = 2  # Start searching after 2 characters
+    max_results = 8  # Limit to 8 suggestions
     
     def get_search_results(self, search):
         """Return search results with related data."""

parks/templates/parks/park_list.html

@@ -47,68 +47,23 @@
 {% block filter_section %}
 <div class="mb-6">
     <div class="max-w-3xl mx-auto relative mb-8">
-        <div class="w-full relative"
-             x-data="{ query: '', selectedId: null }"
-             @search-selected.window="
-                 query = $event.detail;
-                 selectedId = $event.target.value;
-                 $refs.filterForm.querySelector('input[name=search]').value = query;
-                 $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 class="bg-white shadow sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6">
+                <form id="filter-form"
+                      x-ref="filterForm"
+                      hx-get="{% url 'parks:park_list' %}"
+                      hx-target="#park-results"
+                      hx-push-url="true"
+                      hx-trigger="submit"
+                      class="mt-4">
+                    <div class="mb-6">
+                        {{ search_form }}
                     </div>
-                </div>
-            </form>
-
-            <div id="search-results"
-                 class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg"
-                 role="listbox">
-                <!-- Search suggestions will be loaded here -->
+                    {% include "search/components/filter_form.html" with filter=filter %}
+                </form>
             </div>
         </div>
     </div>
-
-    <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"
-                  x-ref="filterForm"
-                  hx-get="{% url 'parks:park_list' %}"
-                  hx-target="#park-results"
-                  hx-push-url="true"
-                  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>
-    </div>
 </div>
 {% endblock %}
 

parks/templates/parks/partials/search_suggestions.html

@@ -1,37 +1,21 @@
-{% load filter_utils %}
-{% if suggestions %}
-<div id="search-suggestions-results"
-     class="w-full bg-white rounded-md shadow-lg border border-gray-200 max-h-96 overflow-y-auto"
-     x-show="open"
-     x-cloak
-     @keydown.escape.window="open = false"
-     x-transition:enter="transition ease-out duration-100"
-     x-transition:enter-start="transform opacity-0 scale-95"
-     x-transition:enter-end="transform opacity-100 scale-100"
-     x-transition:leave="transition ease-in duration-75"
-     x-transition:leave-start="transform opacity-100 scale-100"
-     x-transition:leave-end="transform opacity-0 scale-95">
-     {% for park in suggestions %}
-     {% with location=park.location.first %}
-     <button type="button"
-             class="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer flex items-center justify-between gap-2 transition duration-150"
-             :class="{ 'bg-blue-50': focusedIndex === {{ forloop.counter0 }} }"
-             @mousedown.prevent="query = '{{ park.name }}'; $refs.search.value = '{{ park.name }}'"
-             @mousedown.prevent="query = '{{ park.name }}'; $dispatch('search-selected', '{{ park.name }}'); open = false;"
-             role="option"
-             :aria-selected="focusedIndex === {{ forloop.counter0 }}"
-             tabindex="-1"
-             x-effect="if(focusedIndex === {{ forloop.counter0 }}) $el.scrollIntoView({block: 'nearest'})"
-             aria-label="{{ park.name }}{% if location.city %} in {{ location.city }}{% endif %}{% if location.state %}, {{ location.state }}{% endif %}">
-         <div class="flex items-center gap-2">
-             <span class="font-medium" x-text="focusedIndex === {{ forloop.counter0 }} ? '▶ {{ park.name }}' : '{{ park.name }}'"></span>
-             <span class="text-gray-500">
-                 {% if location.city %}{{ location.city }}, {% endif %}
-                 {% if location.state %}{{ location.state }}{% endif %}
-             </span>
-         </div>
-     </button>
-     {% endwith %}
-     {% endfor %}
- </div>
+{% if results %}
+<div class="py-1">
+    {% for result in results %}
+    <button class="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+            @click="$dispatch('search-selected', '{{ result.name }}')"
+            value="{{ result.id }}"
+            role="option">
+        <div class="flex flex-col">
+            <span class="font-medium text-gray-900 dark:text-white">{{ result.name }}</span>
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+                {{ result.status }}{% if result.location %} • {{ result.location }}{% endif %}
+            </span>
+        </div>
+    </button>
+    {% endfor %}
+</div>
+{% else %}
+<div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
+    {% if query %}No parks found matching "{{ query }}"{% else %}Start typing to search parks{% endif %}
+</div>
 {% endif %}

parks/urls.py

@@ -18,8 +18,6 @@ urlpatterns = [
     
     # Areas and search endpoints for HTMX
     path("areas/", views.get_park_areas, name="get_park_areas"),
-    path("suggest_parks/", views_search.suggest_parks, name="suggest_parks"),
-
     path("search/", views.search_parks, name="search_parks"),
     
     # Park detail and related views

parks/views_search.py

@@ -1,5 +1,4 @@
-from django.http import HttpRequest, HttpResponse, JsonResponse
-from django.shortcuts import render
+from django.http import HttpRequest, HttpResponse
 from django.views.generic import TemplateView
 from django.urls import reverse
 
@@ -13,6 +12,8 @@ class ParkSearchView(TemplateView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
+        
+        # Initialize search form
         context['search_form'] = ParkSearchForm(self.request.GET)
         
         # Initialize filter with current querystring
@@ -20,35 +21,11 @@ class ParkSearchView(TemplateView):
         filter_instance = ParkFilter(self.request.GET, queryset=queryset)
         context['filter'] = filter_instance
         
-        # Apply search if park ID selected via autocomplete
-        park_id = self.request.GET.get('park')
-        if park_id:
-            queryset = filter_instance.qs.filter(id=park_id)
-        else:
-            queryset = filter_instance.qs
+        # Get filtered queryset
+        queryset = filter_instance.qs
             
         # Handle view mode
         context['view_mode'] = self.request.GET.get('view_mode', 'grid')
         context['parks'] = queryset
         
-        return context
-
-def suggest_parks(request: HttpRequest) -> JsonResponse:
-    """Return park search suggestions as JSON."""
-    query = request.GET.get('search', '').strip()
-    if not query:
-        return JsonResponse({'results': []})
-    
-    queryset = get_base_park_queryset()
-    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})
+        return context