CODEWITHSUNDEEP
javascriptjquery-select2
Raymond
Raymond

Reputation: 957

How to mix Select 2 Loading Remote Data with Initial Selections

https://select2.github.io/examples.html#data-ajax

For select2, I wanna:

  1. List some initial selections, so for small list, we can select it directly.
  2. Search remote for long/more selections.

But, it seems I cannot provide both ajax and data parameter at same time.

Any suggestion? Thanks.

code snippet added

function installShopSelect2() {
    var url = "/ajax/brandEnterprise/findShops.mapi";
    "use strict";
    $('#shopid').select2({
        ajax: {
            type: "GET",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            delay: 250,
            //async: false,
            data: function (params) {
                return {
                    keyword: params.term,
                    besId: selectedBes,
                    page: params.page
                };
            },
            processResults: function (data, params) {
                // 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, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;

                return {
                    results: data,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) {
            return markup;
        },
        //data: $.getJSON(url, {besId: selectedBes, keyword: ''}, function (data) {
        //    return {results: data};
        //}),
        placeholder: "--Please search--",
        minimumInputLength: 2,
        allowClear: true
    });
}

Upvotes: 1

Views: 806

Answers (1)

Marcel Ueno
Marcel Ueno

Reputation: 61

The way i solved this is setting the minimumInputLength=0, writing a custom ajax transporter that checks the length of the search term, when its equals to 0 i call the success callback with fixed default values, otherwise if greater than 0 i just do the ajax call and return the response.

Upvotes: 3

Related Questions