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

Select2 - placeholder not showed when custom template used

本文关键字：显示 占位符 自定义 Select2-      更新时间：2023-09-26

我已经初始化了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;
}

我应该把某个东西放在模板里吗？

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

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

相关文章：