javascript - Select2 - 使用自定义模板时不显示占位符

Question

我已经初始化了一个 select2:

$("#myInput").select2({
    ajax: {
    url: /url/to/get',
    dataType: 'json',
    delay: 250,
    data: function(params) {
        return {
            code: params.term
        };
    },
    processResults: function(data) {
        return {
            results: data
        };
    },
    cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    templateResult: formatResult,
    templateSelection: formatSelection,
    minimumInputLength: 1,
    allowClear: true,
    placeholder: 'Select data'
});

不幸的是，空值的占位符不显示。

当删除结果的自定义模板时:

$("#myInput").select2({
    ajax: {
    url: /url/to/get',
    dataType: 'json',
    delay: 250,
    data: function(params) {
        return {
            code: params.term
        };
    },
    processResults: function(data) {
        return {
            results: data
        };
    },
    cache: true
    },
    minimumInputLength: 1,
    allowClear: true,
    placeholder: 'Select data'
});

这是我的模板:

function formatResult(repo) {
    if (repo == null) return "";

    if (repo.loading) return repo.brief;

    var markup = "<div class='clearfix' style='padding-top: 4px; padding-bottom: 3px; '>";
    markup += "<div style='color: black; font-size:12px; font-weight: bold; word-wrap: break-word; line-height: 0.9; margin-bottom: 4px; '>";
    markup += repo.city + "</div>";

    markup += "<div style='font-size: 9px; color: #777; margin-top: 4px;'>";
    markup += repo.postCode + ", " + repo.voivodeship;
    markup += "</div></div>";

    return markup;
}

function formatSelection(postCode) {
    if (postCode == null) return "";
    return postCode.postCode;
}

我应该在模板中添加某些内容吗？

Answer 1

如果您使用的是 v4，则需要使用 <select ></select>而不是<input>将您的 select2 绑定(bind)到。

在 v4 中使用输入元素会导致一些问题，因为不再支持输入。 我相信我也遇到过类似的问题，一旦我将输入元素更改为选择元素，一切都会变得很好。