Dynamically Added Select2 does not perform Ajax call

[QueenBee61]

I need to dynamically add a select2 with an ajax call to my asp.net mvc view. The control adds and displays, but it does not make the ajax call:

`         $('#divEmployee').append('<label>Employees:</label><select id="reqEmployee" class="form-control" name ="reqEmployee" multiple ></select >')`
                  
                    $('#reqEmployee').select2({
                        width: "100%", placeholder: 'Select an Employee', ajax: ({
                            url: "@Url.Action("EmployeeSearch", "Lookup", new { area = "" })", data: function (params) { return { term: params.term, all: !$('#ActiveOnly').is(":checked"), nameAsVal: false, fullName: true, ecid: true } }, delay: 250, dataType: 'json',
                            processResults: function (data) { return { results: data } }
                        }), minimumInputLength: 2
                    }).trigger('change');
                    $('#reqEmployee').on('change', function () {
                        var value = $('#reqEmployee').val();
                        $('#Employees').val(value);
                    });`

[GuillaumeSTEIN]

Hi, I have the same issue.
I have no error in the console. And no call in my network tab :(
(Select2 4.0.13)

<select class="location-search"></select>

[...]


$('.location-search').select2({
    ajax: {
       url: 'https://api.github.com/orgs/select2/repos',
       data: function (params) {
           var query = {
                search: params.term,
                type: 'public'
            }

            // Query parameters will be ?search=[term]&type=public
            return query;
        }
    },
   minimumInputLength: 1,
});

[QueenBee61]

I was able to get it to work by also appending the javascript like this:

`            $("#divEmployee").append(`<div class="col-xl-12 form-group">
            <label>Employees:</label>@Html.ListBoxFor(x => x.Employees, new MultiSelectList( "Id", "Text"), new { id = "reqEmployee", @class = "form-control select-multiple", multiple = "multiple" })
            <script> $(function () {
            $('#reqEmployee').select2({ width:'100%', placeholder: 'Select a Value'
                 ,ajax: ({
                    url: "@Url.Action("EmployeeSearch", "Lookup", new { area = "" })", data: function (params) { return { term: params.term, all: false, nameAsVal: false, fullName: true,ecid:true } }, delay: 250, dataType: 'json',
                    processResults: function (data) { return { results: data } }
                }), minimumInputLength: 2 });

                })

        </scri`+`pt>
        </div>`);`

[FullBringEc]

Checkout this:

https://codepen.io/fullbringec/pen/dyvGKOY

Hope its what you are looking for

[kevin-brown]

Looks like y'all figured it out, nice!

---

This appears to be more of a usage question than a bug report or common feature request. As we continue to keep the Select2 issue tracker geared towards these two areas, bug reports and common feature requests, we are redirecting usage questions to other communities such as the mailing list, IRC, or Stack Overflow.