{# base.html.twig o en tu template principal #}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>


{# input_autocomplete.html.twig #}

<select
    id="{{ id|default('autocomplete_' ~ name) }}"
    name="{{ name }}{% if multiple %}[]{% endif %}"
    class="tom-autocomplete"
    {% if multiple %}multiple{% endif %}
    {% if required %}required{% endif %}
    {{ extra_attrs|raw }}
>
    {% if placeholder is defined and not multiple %}
        <option value="">{{ placeholder }}</option>
    {% endif %}
    {% for key, label in options %}
        <option value="{{ key }}"
            {% if multiple and value is defined and key in value %}
                selected
            {% elseif not multiple and value is defined and value == key %}
                selected
            {% endif %}
                >{{key}} {{ label }}</option>
    {% endfor %}
</select>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        new TomSelect('#{{ id|default("autocomplete_" ~ name) }}', {
            create: false,
            maxOptions: null,
            openOnFocus: false,
            placeholder: "{{ placeholder|default('Seleccionar...') }}",
            {% if multiple %}
            maxItems: null,
            {% else %}
            maxItems: 1,
            {% endif %}
        });
    });
</script>