Select2 - Version 4.0.0-beta.3

I am working to upgrade my Select2 from 3 to 4.0. I am having issue processing the ajax request with Select2. I have following field.

HTML

<input action="load_users" id="id_pic_credits" name="pic_credits" type="hidden">

JS

$(document).ready(function () {
    $("*[action='load_users']").select2({
        allowClear: true,
        width: '100%',
        multiple: false,
        minimumInputLength: 1,
        "ajax": {
            "url": _url,
            delay: 250,
            dataType: "json",
            data: function (search, page) {
                return search
            },
            processResults: function (data, page) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data
                return {
                    results: data.items
                };

            },
            cache: true

        }
    });
});

HTML Result

Server Response

List of dicts.

[{'id':1, 'text':'Ray of Peace'},{'id':2, 'text':'Ray of Peace2'}]

HTML Result

Problem

When i click on any of the records; I can not see if the value is actually is getting select. When the drop down closes; i do not see the selected value. The value of the field is changed in the HTML though; but I can not see the result.

Select2 - Version 4.0.0-beta.3

I am working to upgrade my Select2 from 3 to 4.0. I am having issue processing the ajax request with Select2. I have following field.

HTML

<input action="load_users" id="id_pic_credits" name="pic_credits" type="hidden">

JS

$(document).ready(function () {
    $("*[action='load_users']").select2({
        allowClear: true,
        width: '100%',
        multiple: false,
        minimumInputLength: 1,
        "ajax": {
            "url": _url,
            delay: 250,
            dataType: "json",
            data: function (search, page) {
                return search
            },
            processResults: function (data, page) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data
                return {
                    results: data.items
                };

            },
            cache: true

        }
    });
});

HTML Result

Server Response

List of dicts.

[{'id':1, 'text':'Ray of Peace'},{'id':2, 'text':'Ray of Peace2'}]

HTML Result

Problem

When i click on any of the records; I can not see if the value is actually is getting select. When the drop down closes; i do not see the selected value. The value of the field is changed in the HTML though; but I can not see the result.

• javascript
• jquery
• html
• jquery-select2

1 Answer 1

It is my understanding that you are no longer supposed to use a hidden input element to back your Select2 control. Instead, you should always use a <select> element.

Change your html to:

<select action="load_users" id="id_pic_credits" name="pic_credits"></select>

See the "No more hidden input tags" section on the Select2 4.0 Announcement page.

jsfiddle