Select2 未显示所选值

Question

我正在使用 4.0.0 完整版，因此它也支持 3.5.2 功能。我正在使用 query 选项来填充结果。一切正常，但是当我 select 结果中的一个项目时，它没有显示它。

$(document).ready(function () {
    $(".select").select2({
        minimumInputLength: 1,
        query: function (query) {
            if (query.term) {

                var data = { results: [] }, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) { s = s + query.term; }
                    data.results.push({ id: query.term + i, text: s });
                }
                query.callback(data);
            }
        }
    });
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select class="select" style="width:300px"></select>

Answer 1

这是 Select2 的错误，由自动生成适配器的方式引起。因为 Select2 只会自动为数组适配器创建一个新的 <option>（以及从它们构建的任何东西，比如 AJAX），任何不使用它的东西都无法即时生成新选项。可惜默认的query decorator will wrap the SelectAdapter, which is not a subclass of the ArrayAdapter.

您可以通过为 data.

传递空白数组强制使用数组适配器来解决此问题

$(document).ready(function () {
    $(".select").select2({
        minimumInputLength: 1,
        data: [],
        query: function (query) {
            if (query.term) {

                var data = { results: [] }, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) { s = s + query.term; }
                    data.results.push({ id: query.term + i, text: s });
                }
                query.callback(data);
            }
        }
    });
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select class="select" style="width:300px"></select>

这个should be reported as a bug to the Select2 repository.

Answer 2

经过一番折腾之后，我想出了一个可行的办法，但肯定有更好的方法来做到这一点。

我无法使用任何其他选项。

var is_ajax = false;

$("#select2Data").select2({
    escapeMarkup: function(markup) {
        return markup;
    },
    minimumInputLength: 2,
    //multiple:true,
    data: [],
    query: function(query) {

        var key = query.term;

        if (key) {

            $("#select2-select2Data-results li").show().filter(function() {
                return $(this).text().toLowerCase().trim().indexOf(key) == -1;
            }).hide();

        } else {

            Api.ajax({
                action: 'get_data'
            }).then(function(response) {

                var data = {
                    results: []
                };

                for (var i = 0; i < response.data.length; i++) {

                    data.results.push({
                        id: i,
                        text: response.data[i].Name
                    });

                }

                is_ajax = true;

                query.callback(data);

            });

        }

    }

}).on('change', function(e) {

    data = this.value;

});

Select2 未显示所选值

Select2 is not displaying the selected value

jquery

jquery-select2