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;">
    {% 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"
                    onclick="selectParkForSubmission('{{ park.id }}', '{{ park.name|escapejs }}', '{{ submission_id }}')">
                {{ 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>
function selectParkForSubmission(id, name, submissionId) {
    // Debug logging
    console.log('Selecting park:', {id, name, submissionId});
    
    // Find elements
    const parkInput = document.querySelector(`#park-input-${submissionId}`);
    const searchInput = document.querySelector(`#park-search-${submissionId}`);
    const resultsDiv = document.querySelector(`#park-search-results-${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
    if (resultsDiv) {
        resultsDiv.innerHTML = '';
        console.log('Cleared results div');
    }
    
    // Trigger park areas update
    if (parkInput) {
        htmx.trigger(parkInput, 'change');
        console.log('Triggered change event');
    }
}

// Close search results when clicking outside
document.addEventListener('click', function(e) {
    const searchResults = document.querySelectorAll('[id^="park-search-results-"]');
    searchResults.forEach(function(resultsDiv) {
        const searchInput = document.querySelector(`#park-search-${resultsDiv.id.split('-').pop()}`);
        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
            resultsDiv.innerHTML = '';
        }
    });
});
</script>