Dropdown not Populating with ajax return

How Do I...
#1

Hi,

I am returning items by ajax. When I search for an item it shows. What I would like to do is have the items dropdown in a list when I tab to the search field.

All it shows is Searching…

Here’s my code:

$('#students').select2({
        dropdownParent: $("#modal-add-placement"),
        ajax: {
            url: function (params) {
                return '/dashboard/placement/get-students/' + params.term;
            },
            dataType: 'json',
            delay: 250,
            processResults: function (data) {          
                return {
                    results: $.map(data, function (item) {
                        return {id: item.id, text: item.text};
                    })
                };
            }
        },
        allowClear: true,
        placeholder: 'Type Student\'s name',
        tokenSeparators: [',', ' '],
        language: {
            errorLoading: function () {
                return "Searching..."
            }
        },
        cache: true
    });

I must be missing something since I have found a way to do this.

Thanks in advance.

#2

When using AJAX to supply data to a Select2, no data is actually loaded until the user enters some text in the input field. This makes sense in your case since the code doesn’t know which student’s data you to load at the point when you tab to the Select2 widget (since there is no search term at that point).