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

时间:2016-05-06 17:32:56

标签: javascript select2

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

我应该把模板放进模板吗?

1 个答案:

答案 0 :(得分:1)

如果您使用的是v4,那么您需要使用<select ></select>而不是<input>来绑定您的select2。

在v4中使用input元素会导致一些问题,因为不再支持输入。 我相信我有类似的问题,一旦我将我的输入元素更改为选择元素,一切都很好。