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

Posted 2023-05-07

【中文标题】Select2 - 通过 ajax 调用传回附加数据

【英文标题】：Select2 - Pass back additional data via ajax call

【发布时间】：2016-06-04 01:30:58

【问题描述】：

好吧，我觉得我快疯了。我正在使用 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的选择元素吗？所以我可以做类似$('#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>

我发誓我上周确认这有效，但现在它完全忽略了该 org 属性。我已经确认返回的 json 数据确实包含具有正确 org_id 和 org_name 的 org。我一直无法在网上挖掘任何东西，只有documentation的这个sn-p：

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

那么有人可以帮我解决这个问题吗？我已经为此浪费了几个小时。

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

【问题讨论】：

嗨，我现在面临同样的问题。理想情况下，我需要使用数据属性传递其他数据（不仅是 id 和文本）。你解决问题了吗？

您有没有为此找到可行的解决方案？

我添加了我的解决方案。

【参考方案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);

【讨论】：

谢谢，您上面的解决方案解决了我的问题并节省了我的时间

【参考方案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
            
        ]
    
]