{% load i18n static %}

<div class="research wrapper--centered">
    <form id="form__municipality" class="research__field--full">

        <select id="select__municipality" multiple="multiple" class="input--select2-single" style="height:64px"
            data-placeholder="Choisis ta Commune ...">
            {% for municipality in municipalities %}
            <option style="display:none"
                value="{% url 'municipality' municipality.name municipality.postal_code %}">
                {{municipality.postal_code}} - {{municipality.name}}</option>
            {% endfor %}
        </select>

        <button class="research__btn" title="Rechercher"></button>
        <!--onchange="if (this.selectedIndex) window.location.href = this.value;"-->
    </form>
</div>

<script>
    const form = document.getElementById('form__municipality');

    document.addEventListener('keyup', function (e) {
        if (e.keyCode == 13) {
            const select_input = form.elements.select__municipality;
            if (select_input.value) {
                window.location.href = select_input.value
            }
        }
    })

    form.onsubmit = function (e) {
        const select_input = e.target.elements.select__municipality;
        e.target.action = select_input.value;
    }
</script>