How do I preload values into a Select2 control and still search remote data?

Question

When I preload values into Select2 dropdown, and expand the control to type in a value. It filters the preloaded values. How do I configure Select2 to make ajax calls (new search) when I type in the text box? If I don't preload values into Select2, the ajax calls work. So how can I have both?

I preload my select2 control with something like this:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: url,
    data: json,
    dataType: "json",
    success: function (data, textStatus) {
        var json = JSON.parse(data.d);
        var arrData = [];
        if (json !== null && json !== undefined) {
            if (json.length > 0) {
                $.each(json, function (index, element) {
                    var item = { id: element.CommonName, text: element.CommonName, name: element.CommonName };
                    arrData.push(item);
                });
            }
        }
        $("[ID$=ddlDropDown]").select2({
            data: arrData
        });
    }
});

I instantiate my Select2 control with this:

$("[ID$=ddlDropDown]").select2({
    ajax: {
        url: url,
        type: "POST",
        dataType: 'json',
        async: true,
        contentType: "application/json; charset=utf-8",
        delay: 500,
        data: function (params) {

                var query = {
                    searchString: (params.term || ""),
                    page: params.page
                }
                // Query paramters will be ?search=[term]&page=[page]
                return JSON.stringify(query);


        },
        processResults: function (data, page) {
            var json = JSON.parse(data.d);
            if (json != null) {
                if (json.length > 0) {
                    return {
                        results: $.map(json, function (item) {
                            return {
                                text: item.CommonName,
                                name: item.CommonName,
                                id: item.CommonName
                            }
                        })
                    };
                } else {
                    return false;
                }
            }
            else {
                return false;
            }

        },
        success: function (data, page) {
            $("[ID$=ddlDropDown]").select2("data", data, true);
        }
    },
    minimumInputLength: 2,
    placeholder: "Select a Value",
    disabled: false,
    cache: true
});

Ahmed Sunny Ahmed Sunny · Accepted Answer · 2019-10-01T09:19:48

as i had this problem and could not found any solution, I would like to share a solution which i did.even this is an old question which is not answered yet.would be helpful for others

      $('#select2').select2({
            allowClear: true,
            multiple: false,
      //    minimumInputLength: 3,
            ajax: {
                url: "url",
                dataType: 'json',
                delay: 250,
                type: 'POST',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data, container) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.title + '| <b>' + item.title_2 + '</b>',
                                id:  item.id,
                            }
                        })
                    };
                },
                cache: false
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            placeholder: __('select.project_search'),
        }).live('change', function (e) {
           // on change code
         });

And in your controller you can check if search term is null then return the preload options else run the SQL for search data or return remote data.

the trick is you have to comment out minimumInputLength

this will trigger select2 ajax whenever you click it. and loads preload for you like following

and when you search you will get remote results like this

I hope this will help someone searching for a solution

How do I preload values into a Select2 control and still search remote data?

1 Answers