Question

我正在使用Select2 AJAX远程选项来获取数据：

$('#t').select2({
    ajax: {
        url: '../ajax/results.php',
        data: function (params) {
            return {
                search: params.term,
                page: params.page || 1
            };
        }
    }
});

到目前为止一切顺利，结果都是这样返回的（请注意<small>标签）：

{
    "results": [
        {
            "id": "1",
            "text": "Doe Joe, <small>Mr.</small>"
        },
        {
            "id": "2",
            "text": "Smith Anne, <small>Mrs.</small>"
        },
        {
            "id": "3",
            "text": "Rossi Mario, <small>Mr.</small>"
        },
        ...
     ],
     "pagination": {
         "more": false
     }
}

在<select>中，<small>标记按原样打印，而不是被解析。默认选择2文档says that HTML are not rendered，并且渲染的结果必须包装在jQuery对象中才能工作，但没有给出进一步的示例。

所有涉及templateResult的示例确实没有提供有关如何传递AJAX结果的反馈（即https://select2.org/dropdown#templating）

请帮忙吗？

Answer 1

templating example是正确的，我只需将所有内容都包含在<span>标记中即可使用：

function formatItem (item) {
    if (!item.id) {
        return item.text;
    }
    return $('<span>' + item.text + '</span>');
}

$('#t').select2({
    ajax: {
        url: '../ajax/results.php',
        data: function (params) {
            return {
                search: params.term,
                page: params.page || 1
            };
        }
    },
    templateResult: formatItem,
    templateSelection: formatItem
});

呈现AJAX响应的HTML

1 个答案: