Select2

Question

好吧，我觉得我要疯了。我正在使用 select2 jquery 插件（版本 4），并通过 ajax 检索数据。所以你可以输入一个名字，它会 return 该联系信息。但我也想return那个联系人是哪个组织的一部分。

这是我的 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
});

这是我正在 returning（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 数据 returned 确实包括具有正确 org_id 和 org_name 的组织。我无法在网上挖掘任何东西，只有 documentation:

的这个片段

The id and text properties are required on each object, and these are the properties that Select2 uses for the internal data objects. Any additional paramters passed in with data objects will be included on the data objects that Select2 exposes.

谁能帮我解决这个问题？我已经在这上面浪费了几个小时了。

编辑： 由于我没有收到任何回复，我目前的计划是使用 processResults 回调生成隐藏的输入字段或 JSON我稍后将在我的代码中引用的块。鉴于这种情况，我觉得这是一个 hacky 解决方案，但如果没有其他办法，那就是我会做的。我宁愿那样也不愿再打 ajax 电话来联系组织。当我着手实施它时，我将 post 我的解决方案。

Answer 1

暂时无法发表评论（信誉低）..所以...回答 slick:

包括附加数据 (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
            }
        ]
    }
]

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

Select2 - Pass back additional data via ajax call

javascript

ajax

jquery-select2