API, change the value send

How Do I...
#1

Hello, i’m connected to a movie API with a select2. Using Symfony 4.3.3.
I want to give to my controller some specific value from the JSON (given by the api).
The problemen is that when i select a movie with select2, he set the value with the id of the film and I don’t know why and i don’t know how to change that.

<option value ="13>Forrest Gump</option>

This is what is given to my controller. And 13is the id of the movie “Forrest Gump”.

Here is my code :

    $(document).ready(function () {
            $(".products-select2-num").select2({
                language: 'fr-FR',
                width: '100%',
                closeOnSelect: false,
                placeholder: 'Entrez le nom du film, de la série ou de la personne.',
                minimumInputLength: 3,
                ajax: {
                    url: function (params) {
                        return 'https://api.exemplefilms.org/3/search/multi?api_key=monapicachee&language=fr&query='+params.term+'&page=1&include_adult=false';
                    },
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        var results = [];
                        data = data.results;
                        data.forEach(e => {
                            results.push({ id: e.id, text: e.title||e.name, media: e.media_type });
                        });
                        return {
                            results: results
                        };
                    },
                    data: function (query) {
                        return query;
                    },
                },
                templateResult: formatResult,
            });
            function formatResult(d) {
                $d = $('<option/>').val(d.media).text(d.text);
                return $d;
            }
        });

I would like to give like I said before some other things as value.
thank you for your help.

#2

I see what you’re trying to do with the formatResult callback, but it won’t work. The value (either a jQuery object or plain text) you return from the formatResult callback is only used in the Select2 widget’s display (which is a <ul> with <li>s for each of the “options” in the Select2. With an AJAX data source, Select2 will always use the id property’s value as the value of the selected option, because that value is guaranteed to be unique.

However, you have already figured out that you can store any other data you want with each item (in your case, the “media” value). My advice is to attach a handler for the change.select2 event, and in that handler you can retrieve the additional data associated with the selected element and do whatever you want with it. For example, if you just want to submit it to a server (like a regular form submission), you could either create a hidden field in the form, load the selected additional data value into it, and then call the form’s submit method, or you could use an AJAX technique (XHR, jQuery, the new fetch() method, etc.) to POST the selected data to the desired target URL.