thrillwiki_django_no_react/templates/moderation/partials/park_search_results.html

<div class="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;"
     x-data="parkSearchResults('{{ submission_id }}')"
     @click.outside="clearResults()">
    {% if parks %}
        {% for park in parks %}
            <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="selectPark('{{ park.id }}', '{{ park.name|escapejs }}')">
                {{ park.name }}
            </button>
        {% endfor %}
    {% else %}
        <div class="px-4 py-2 text-gray-700 dark:text-gray-300">
            {% if search_term %}
                No parks found
            {% else %}
                Start typing to search...
            {% endif %}
        </div>
    {% endif %}
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('parkSearchResults', (submissionId) => ({
        submissionId: submissionId,

        selectPark(id, name) {
            // Debug logging
            console.log('Selecting park:', {id, name, submissionId: this.submissionId});
            
            // Find elements using AlpineJS approach
            const parkInput = document.querySelector(`#park-input-${this.submissionId}`);
            const searchInput = document.querySelector(`#park-search-${this.submissionId}`);
            const resultsDiv = document.querySelector(`#park-search-results-${this.submissionId}`);
            
            // Debug logging
            console.log('Found elements:', {
                parkInput: parkInput?.id,
                searchInput: searchInput?.id,
                resultsDiv: resultsDiv?.id
            });
            
            // Update hidden input
            if (parkInput) {
                parkInput.value = id;
                console.log('Updated park input value:', parkInput.value);
            }
            
            // Update search input
            if (searchInput) {
                searchInput.value = name;
                console.log('Updated search input value:', searchInput.value);
            }
            
            // Clear results
            this.clearResults();
            
            // Trigger park areas update
            if (parkInput) {
                htmx.trigger(parkInput, 'change');
                console.log('Triggered change event');
            }
        },

        clearResults() {
            const resultsDiv = document.querySelector(`#park-search-results-${this.submissionId}`);
            if (resultsDiv) {
                resultsDiv.innerHTML = '';
                console.log('Cleared results div');
            }
        }
    }));
});
</script>