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

autocomplete/templates/autocomplete/suggestions.html

@@ -0,0 +1,20 @@
+{% if results %}
+<ul class="py-1 overflow-auto max-h-60" role="listbox">
+    {% for result in results %}
+    <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+        role="option"
+        @click="selectedId = '{{ result.key }}'; query = '{{ result.label }}'; $refs.filterForm.requestSubmit()">
+        <div class="flex flex-col">
+            <span class="font-medium">{{ result.label }}</span>
+            {% if result.extra %}
+            <span class="text-sm text-gray-500 dark:text-gray-400">{{ result.extra }}</span>
+            {% endif %}
+        </div>
+    </li>
+    {% endfor %}
+</ul>
+{% else %}
+<div class="px-4 py-2 text-gray-500 dark:text-gray-400">
+    No results found
+</div>
+{% endif %}

autocomplete/templates/autocomplete/widget.html

@@ -0,0 +1,38 @@
+{% load static %}
+
+<div class="relative" x-data="{ query: '', selectedId: null }">
+    <input type="text"
+           name="{{ widget.name }}_search"
+           placeholder="{{ widget.attrs.placeholder|default:'Search...' }}"
+           class="{{ widget.attrs.class }}"
+           x-model="query"
+           @keydown.escape="query = ''"
+           hx-get="{% url 'autocomplete:items' ac_name %}"
+           hx-trigger="input changed delay:300ms"
+           hx-target="#{{ widget.name }}-suggestions"
+           hx-indicator="#{{ widget.name }}-indicator">
+
+    <input type="hidden"
+           name="{{ widget.name }}"
+           x-model="selectedId">
+
+    <!-- Loading indicator -->
+    <div id="{{ widget.name }}-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>
+
+    <!-- Suggestions dropdown -->
+    <div id="{{ widget.name }}-suggestions"
+         class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg"
+         role="listbox"
+         style="display: none;"
+         x-show="query.length > 0">
+    </div>
+</div>