Question

我正在使用4.0.0，因此它也支持3.5.2功能。我使用query选项填写结果。一切正常，但是当我从结果中选择一个项目时，它没有显示它。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这是Select2的一个错误，它是由自动生成适配器的方式引起的。因为Select2只会自动为数组适配器（以及构建它们的任何东西，如AJAX）创建新的<option>，所以不使用它的任何东西都无法动态生成新的选项。不幸的是，默认query decorator将包裹SelectAdapter，ArrayAdapter不是should be reported as a bug的子类。

您可以通过传入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>

这Select2 repository {{3}}。{/ p>

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未显示所选值

2 个答案: