The form imports data from JSON (The path aff_json and aff_import is a route PH)

<form id="import" action="{{ path('aff_import') }}" method="post" name="aff">
    <input type="hidden" data-action="{{ path('aff_json') }}" id="aff_json">
    <select name="aff[code]" data-placeholder="{{ 'affaire' | trans | capitalize }}" required></select>
    <button id="importAff" type="submit">{{ 'import' | trans | capitalize }}</button>
</form>

And the js for this form :

const onClickImport = function () {
        let url = $('#aff').attr('data-action');
        $("#import .select2-ajax").select2({
            dropdownParent: $('#import'),
            // some datas
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.code,
                            }
                        }),
                    }
                }
            }
        }).trigger('change');

        modalImportAffaire.show();
    }

So now, i've got a select box with the different value.

And now what I want, it's to change by datalist with proposing the same different value; i'm trying to do that:

        <form id="import" action="{{ path('aff_import') }}" method="post" name="aff">
            <label>Choose a browser from this list:
            <input list="browsers" data-action="{{ path('affaire_qp_json') }}" id="affaire_qp">
                <datalist id="browsers" class="select2-ajax" style="width: 20%" data-placeholder="{{ 'affaire' | trans | capitalize }}" required></datalist>
        </form>

At the beggining I have nothin in my input text :

The problem is here, it's when I choose and click in the select box:

In my input, I have the value selected into the select box :

The problem is that I have a input with a select box (with values) and I want everything in input text already and don't need to selectin select box, anybody can explain why ?