如何將值預加載到Select2控件中並仍然搜索遠程數據？

Question

當我將值預加載到Select2下拉列表中時，展開控件以鍵入一個值。 它過濾預加載的值。 在文本框中鍵入文字時，如何配置Select2以進行Ajax調用（新搜索）？ 如果我不將值預加載到Select2中，則ajax調用會起作用。 那我怎么都可以呢？

我將這樣的東西預加載到select2控件中：

$.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
        });
    }
});

我用這個實例化我的Select2控件：

$("[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
});

Answer 1

因為我遇到了這個問題並且找不到任何解決方案，所以我想分享一個我做過的解決方案。即使這是一個舊問題，目前還沒有得到解答。對其他人會有所幫助

      $('#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
         });

並且在您的控制器中，您可以檢查搜索項是否為null，然后返回預加載選項，否則運行SQL搜索數據或返回遠程數據。

訣竅是您必須注釋掉minimumInputLength

只要您單擊它，就會觸發select2 ajax。 並為您加載預加載，如下所示

當您搜索時，您將獲得像這樣的遠程結果

我希望這會幫助尋找解決方案的人