Question

我可以轻松检索和格式化AJAX数据以使用Select2，就像这样

function formatItem (item) {
    if (!item.id) {
        return item.text;
    }
    var _item = '<span class="' + item.deleted +'"><i class="fa fa-user"></i> ' + item.doctor + ', <small>' + item.sex + ' (' + item.user + ')</small></span>';
    return $(_item);
}

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

到目前为止一切顺利：<select>项目正确呈现为HTML，带有漂亮的Font-Awesome图标和<small>标记。

用户现在选择一个项目并提交（搜索）表单。当然，我想将当前项目标记为selected，这就麻烦了。

Select2文档可以使用predefine an AJAX retrieved item，但这适用于简单文本，而不适用于包含所有HTML铃声和口哨声的渲染项目

因此，在调整提供的示例时：

$.ajax({
    type: 'GET',
    url: '../ajax/results-selected.php', // url to retrieve a single item
    data: {
        iData: [here goes the ID for retrieving single item]
    }
}).then(function (data) {
    // create the option and append to Select2
    var item = data.results[0];
    console.log(item);
    var option = new Option(item, item.id, true, true);
    tabSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    tabSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

我获取HTML呈现的项目，但是有一系列undefined（请注意console.log(item)会返回预期的结果：换句话说，我有字段但不知道如何渲染它们）

我尝试了很多东西，但没有一个能够工作，即：

var option = new Option(formatItem(item), item.id, true, true);

我读过但找不到有效的解决方案：请帮忙吗？

Answer 1

我通过在JSON响应中返回整个HTML片段（作为text项目）来管理它的工作

// the JSON response
{
    "results": [
        {
            "id": "1234",
            "text": "<span class=\"\"><i class=\"fa fa-user\"></i> Doe John, <small>Mr. (Site Owner)</small></span>"
         }
    ]
}


// the updated snippet
$.ajax({
    type: 'GET',
    url: '../ajax/results-selected.php', // url to retrieve a single item
    data: {
        iData: [here goes the ID for retrieving single item]
    }
}).then(function (data) {
    // create the option and append to Select2
    var item = data.results[0];
    console.log(item);
    var option = new Option(item.text, item.id, true, true);
    tabSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    tabSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

使用ajax选择2预定义的渲染项

1 个答案: