选择2 版本 4 AJAX 数据:结果未显示在控制中

Question

由于我已经切换到 select2 插件的第 4 版，我的 ajax 调用不再有效。

我得到一个数组形式的响应，该数组在控制台中打印正常，但结果未显示在 select2 控件中。

http 响应 ：

{"results":{"id":"ok","term":"ok","description":"ok"}}

我的代码 ：

            $(function(){
                $('#appbundle_marketplace_product_ingredient_barcode').select2({
                    minimumInputLength: 3,
                    ajax:
                    {
                        delay: 250,
                        url: "{{ path('search_barcode') }}",
                        dataType: 'json',
                        debug: true,
                        data: function (params) {
//                            console.log(params.term);
                            return {barcode: params.term};},
                        processResults: function (data) {
                            console.log(data);
                            return data;
                        }
                    }
                });
            });

控制台中打印的数据是以下对象：

Object {results: Object}
results: Object
  description: "ok"
  id: "ok"
  term: "ok"
__proto__: Object
__proto__: Object

如何让 select2 在下拉列表中显示结果，然后单击结果以使其处于选中状态？

多谢

Answer 1

好问题，我遇到了同样的问题。

我在Wordpress工作时遇到了类似的问题。 我必须更新我的 php 才能返回以下内容：

// This prepared SQL query returns objects, so I thought I was fine 
$partList = $wpdb->get_results( $sql );
// echo json_encode( $partList ); <- worked, but not quite right...
// Select2 wanted an array of items, so I added this
$jsonItems = array("items"=>$partList);
echo json_encode( $jsonItems );

在我的JS中，我有这个...

function formatPartSelection(ajaxData){
        return ajaxData.commonName || ajaxData.text;
}
function formatAjaxResponse (ajaxData){
    if(ajaxData.loading) return ajaxData.text;
    var markup = '<div class="clearfix select2-result-selectable" style="border-bottom:solid; border-bottom-color: #D3D3D3">' +
        '<div class="col-sm-10">' +
        '<div class="clearfix">' +
        '<div class="col-sm-10"><span style="font-weight: bold;">' + ajaxData.fieldOne + ' | ' + ajaxData.text + '</span></div>' +
        '</div>';
    if (ajaxData.description) {
        markup += '<div class="col-sm-10">' +
        '<div class="clearfix">' +
        '<div><i>' + ajaxData.description + '</i></div>';
    }
    markup += '</div><br/></div>';
    return markup;
}
$.fn.select2.amd.require(
    ["select2/core", "select2/utils", "select2/compat/matcher"],
    function (Select2, Utils, oldMatcher) {
    });
$('.myClass').select2({
    placeholder: "Select part(s)...",
    minimumInputLength: 3,
    multiple: true,
    ajax: {
        url: url_to_your_php,
        delay: 250,
        type: "POST",
        dataType: 'json',
        data: function (params) {
            var queryParameters = {
                action: 'my_enqued_wp_ajax',
                searchStringValue: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {                   
            console.log(data);
            return {
                results: data.items
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    templateResult: formatAjaxResponse,
    templateSelection: formatPartSelection
});

上面的代码允许我获取要从工作中选择的项目列表，但我实际上无法单击其中任何一个。 几个小时后，我找到了这个答案，它帮助我实际上能够在 Select2 下拉列表中选择一个值：

https://stackoverflow.com/a/29082217/4266699

*请注意，我可以在数据库中创建一个名为 ID 的列，所以我能够在后端修复此问题。

希望这有帮助！