thrillwiki_django_no_react/parks/templates/parks/partials/search_suggestions.html

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