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

<script>
function selectManufacturerForSubmission(id, name, submissionId) {
    // Debug logging
    console.log('Selecting manufacturer:', {id, name, submissionId});
    
    // Find elements
    const manufacturerInput = document.querySelector(`#manufacturer-input-${submissionId}`);
    const searchInput = document.querySelector(`#manufacturer-search-${submissionId}`);
    const resultsDiv = document.querySelector(`#manufacturer-search-results-${submissionId}`);
    
    // Debug logging
    console.log('Found elements:', {
        manufacturerInput: manufacturerInput?.id,
        searchInput: searchInput?.id,
        resultsDiv: resultsDiv?.id
    });
    
    // Update hidden input
    if (manufacturerInput) {
        manufacturerInput.value = id;
        console.log('Updated manufacturer input value:', manufacturerInput.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^="manufacturer-search-results-"]');
    searchResults.forEach(function(resultsDiv) {
        const searchInput = document.querySelector(`#manufacturer-search-${resultsDiv.id.split('-').pop()}`);
        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
            resultsDiv.innerHTML = '';
        }
    });
});
</script>