thrillwiki_django_no_react/autocomplete/templates/autocomplete/widget.html

{% 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>