thrillwiki_django_no_react/templates/rides/partials/manufacturer_search_results.html

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('manufacturerSearchResults', () => ({
        selectManufacturer(id, name) {
            // Update manufacturer fields using AlpineJS reactive approach
            const manufacturerInput = this.$el.closest('form').querySelector('#id_manufacturer');
            const searchInput = this.$el.closest('form').querySelector('#id_manufacturer_search');
            const resultsDiv = this.$el.closest('form').querySelector('#manufacturer-search-results');
            
            if (manufacturerInput) manufacturerInput.value = id;
            if (searchInput) searchInput.value = name;
            if (resultsDiv) resultsDiv.innerHTML = '';
            
            // Update ride model search to include manufacturer using HTMX
            const rideModelSearch = this.$el.closest('form').querySelector('#id_ride_model_search');
            if (rideModelSearch) {
                rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
            }
            
            // Dispatch custom event for parent component
            this.$dispatch('manufacturer-selected', { id, name });
        }
    }));
});
</script>

<div x-data="manufacturerSearchResults()" 
     @click.outside="$el.innerHTML = ''"
     class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" 
     style="max-height: 240px; overflow-y: auto;">
    {% if manufacturers %}
        {% for manufacturer in manufacturers %}
            <button type="button"
                    class="w-full px-4 py-2 text-left text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
                    @click="selectManufacturer('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}')">
                {{ manufacturer.name }}
            </button>
        {% endfor %}
    {% else %}
        <div class="px-4 py-2 text-gray-700 dark:text-gray-300">
            {% if search_term %}
                No matches found. You can still submit this name.
            {% else %}
                Start typing to search...
            {% endif %}
        </div>
    {% endif %}
</div>