Select2 - 通过ajax调用传回附加数据

Question

好吧,我觉得我在这里疯了.我正在使用select2 jquery插件(版本4),并通过ajax检索数据.因此,您可以键入名称,它将返回该联系信息.但我也希望回复联系人所属的组织.

这是我的select2初始化:

$('#contact_id').select2({
    ajax: {
        url: 'example.com/contacts/select',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term,
                page: params.page
            };
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 3,
    maximumSelectionLength: 1
});

这是我要返回的数据(laravel框架):

foreach($contacts as $con) {
    $results[] = [
        'id'    => $con->contact_id,
        'text'  => $con->full_name,
        'org'   => [
            'org_id'        => $con->organization_id,
            'org_name'      => $con->org_name
        ]
    ];
}

return response()->json($results);

那么'org'是不应该通过select2附加到创建的选项或select元素？所以我可以做类似$('#contact_id').select2().find(':selected').data('data').org或$('#contact_id').select2().data('data').org类似的事情？

理想情况下,这看起来像:

<select>
    <option value="43" data-org="{org_id:377, org_name:'Galactic Empire'}">Darth Vader</option>
</select>

我发誓我上周确认这个工作,但现在它完全无视那个组织财产.我已经确认返回的json数据确实包含org和正确的org_id和org_name.我无法在网上挖掘任何东西,只有这个文档片段:

每个对象都需要id和text属性,这些属性是Select2用于内部数据对象的属性.传入数据对象的任何其他参数都将包含在Select2公开的数据对象中.

所以有人可以帮我这个吗？我已经浪费了几个小时了.

编辑:由于我没有得到任何响应,我目前的计划是使用processResults回调来生成隐藏的输入字段或JSON块,我稍后将在我的代码中引用.考虑到这种情况,我觉得这是一个hacky解决方案,但如果没有别的办法,那就是我要做的.我宁愿做另外一个ajax调用来获得组织.当我开始实施它时,我会发布我的解决方案.

Answer 1

现在不能评论(低声望)..所以...回答光滑:

包括其他数据(v4.0):

processResults: function (data) {
    data = data.map(function (item) {
        return {
            id: item.id_field,
            text: item.text_field,
            otherfield: item.otherfield
        };
    });
    return { results: data };
}

阅读数据:

var data=$('#contact_id').select2('data')[0];
console.log(data.otherfield);

Answer 2

不记得我做错了什么，但是使用processResults(data)，数据包含完整的响应。在下面的实现中，我在选择某个项目时访问此信息：

$('#select2-box').select2({
    placeholder: 'Search Existing Contacts',
    ajax: {
        url: '/contacts/typeahead',
        dataType: 'json',
        delay: 250,
        data: function(params){
            return {
                q: params.term,
                type: '',
                suggestions: 1
            };
        },
        processResults: function(data, params){
            //Send the data back
            return {
                results: data
            };
        }
    },
    minimumInputLength: 2
}).on('select2:select', function(event) {
    // This is how I got ahold of the data
    var contact = event.params.data;

    // contact.suggestions ...
    // contact.organization_id ...
});



// Data I was returning
[
    {
        "id":36167, // ID USED IN SELECT2
        "avatar":null,
        "organization_id":28037,
        "text":"John Cena - WWE", // TEXT SHOWN IN SELECT2
        "suggestions":[
            {
                "id":28037,
                "text":"WWE",
                "avatar":null
            },
            {
                "id":21509,
                "text":"Kurt Angle",
                "avatar":null
            },
            {
                "id":126,
                "text":"Mark Calaway",
                "avatar":null
            },
            {
                "id":129,
                "text":"Ricky Steamboat",
                "avatar":null
            },
            {
                "id":131,
                "text":"Brock Lesnar",
                "avatar":null
            }
        ]
    }
]