thrillwiki_django_no_react/templates/moderation/partials/designer_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 designers %}
        {% for designer in designers %}
            <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="selectDesignerForSubmission('{{ designer.id }}', '{{ designer.name|escapejs }}', '{{ submission_id }}')">
                {{ designer.name }}
            </button>
        {% endfor %}
    {% else %}
        <div class="px-4 py-2 text-gray-700 dark:text-gray-300">
            {% if search_term %}
                No designers found
            {% else %}
                Start typing to search...
            {% endif %}
        </div>
    {% endif %}
</div>

<script>
function selectDesignerForSubmission(id, name, submissionId) {
    // Debug logging
    console.log('Selecting designer:', {id, name, submissionId});
    
    // Find elements
    const designerInput = document.querySelector(`#designer-input-${submissionId}`);
    const searchInput = document.querySelector(`#designer-search-${submissionId}`);
    const resultsDiv = document.querySelector(`#designer-search-results-${submissionId}`);
    
    // Debug logging
    console.log('Found elements:', {
        designerInput: designerInput?.id,
        searchInput: searchInput?.id,
        resultsDiv: resultsDiv?.id
    });
    
    // Update hidden input
    if (designerInput) {
        designerInput.value = id;
        console.log('Updated designer input value:', designerInput.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');
    }
}

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