thrillwiki_django_no_react/templates/parks/partials/park_search_results.html

<div 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 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="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>
function selectPark(id, name) {
    document.getElementById('id_park').value = id;
    document.getElementById('id_park_search').value = name;
    document.getElementById('park-search-results').innerHTML = '';
}
</script>