<select{{ field.input.attrs }}>
    {% if field.endpoints.choices %}
        {% for choice in field.choice_to_options_selected %}
            <option value="{{ choice.1 }}" selected="selected" label="{{ choice.2 }}">{{ choice.2 }}</option>
        {% endfor %}
    {% else %}
        {% for choice in field.choice_tuples %}
            <option value="{{ choice.1 }}" {% if choice.3 %}selected="selected"{% endif %} label="{{ choice.2 }}">{{ choice.2 }}</option>
        {% endfor %}
    {% endif %}
</select>

<style>
    #{{ field.input.attrs.id }} {
        min-width: 200px;
    }
</style>

<script type="text/javascript">
    var id_field = "#{{ field.input.attrs.id }}";
    $(id_field).select2({
        placeholder: '{{ field.input.extra.placeholder }}',
        {% if field.endpoints.choices %}
            ajax: {
                url: ".",
                dataType: "json",
                data: function (params) {
                    return {
                        '{{ field.endpoints.choices.endpoint_path }}': params.term || '', // search term
                        page: params.page || 1
                    };
                }
            },
        {% endif %}
        allowClear: true,
        multiple: {% if field.is_list %}true{% else %}false{% endif %}
    });
</script>
