jQuery Select2 JSON数据

Question

我的脚本不会在Select2中加载任何数据。我用JSON数据做了一个test.php（在一切正常后都会提供这个数据（test.php是我的内部测试））。

test.php的输出

[{"suggestions": ["1200 Brussel","1200 Bruxelles","1200 Sint-Lambrechts-Woluwe","1200 Woluwe-Saint-Lambert"]}] 

jQuery脚本：

$("#billing_postcode_gemeente").select2({ 
    minimumInputLength: 2, 
    tags: [], 
    ajax: { 
     url: 'https://www.vooronshuis.nl/wp-content/plugins/sp-zc-checkout/test.php', 
     dataType: 'json', 
     type: "GET", 
     quietMillis: 50, 
     data: function (data) { 
      alert(data); 
     }, 
     processResults: function(data) { 
      return { 
       results: $.map(data.suggestions, function(obj) { 
        return { 
         id: obj.key, text: obj.value 
        } 
       }) 
      }; 
     } 
    } 
}); 

我一直在寻找和检查所有其他解决方案。它不适合我。我卡住了。

更新：jQuery脚本到目前为止

$("#billing_postcode_gemeente").select2({ 
    minimumInputLength: 2, 
    placeholder: "Voer uw postcode in..", 
    ajax: { 
     url: 'https://www.vooronshuis.nl/wp-content/plugins/sp-zc-checkout/checkaddressbe.php', 
     dataType: 'json', 
     type: "GET", 
     quietMillis: 50, 
     data: function (data) { 
      return { 
      ajax_call: 'addressZipcodeCheck_BE', 
      zipcode: '1200' 
      }; 
     }, 
      processResults: function(data) { 
       alert(data); 
       correctedData = JSON.parse(data)[0]suggestions; 
       alert(correctedData); 
       return { 
        results: $.map(correctedData, function(obj) { 
        return { 
         id: obj.key, 
         text: obj.value 
        } 
        }) 
       }; 
     } 
    } 
}); 

Answer 1

Here是你的榜样工作提琴。 我已经完成了如果在本地JSON对象上，但您可以在您的响应中复制相同的结果，或者相应地更改您的响应。

您的data.suggestions不算什么。因为data是一个JSON数组，其第一个元素是一个JSON对象，其键为suggestions并且值为一个建议数组。

在启用JQuery的浏览器控制台中运行此代码，您将取消。

var data = '[{"suggestions": ["1200 Brussel","1200 Bruxelles","1200 Sint-Lambrechts-Woluwe","1200 Woluwe-Saint-Lambert"]}]'; 
JSON.parse(data)[0]; 
JSON.parse(data)[0].suggestions; 

还检查this答案，看看如何正确的响应应该看起来像。

更新答案： 额外资料传送给后端：

$('#billing_postcode_gemeente').DataTable(
{ 
...... 
        "processing" : true, 
        "serverSide" : true, 
        "ajax" : { 
         url : url, 
         dataType : 'json', 
         cache : false, 
         type : 'GET', 
         data : function(d) { 
          // Retrieve dynamic parameters 
          var dt_params = $('#billing_postcode_gemeente').data(
            'dt_params'); 
          // Add dynamic parameters to the data object sent to the server 
          if (dt_params) { 
           $.extend(d, dt_params); 
          } 
         } 
        }, 
}); 

这里dt_params是你额外的参数（zipcode 您要发送给服务器，以获得适当的响应）。这个dt_params被添加到数据表参数中，并可以在后端访问以适应响应。

必须有一个地方你正在参加zipcode条目。在该输入框的侦听器上，您可以添加下面的代码来销毁和重新创建数据表以反映更改。此代码将在您的要求JSON添加键值（关键是zip_code）对到dt_params键：

function filterDatatableByZipCode() { 

     $('#billing_postcode_gemeente').data('dt_params', { 
      ajax_call: 'addressZipcodeCheck_BE', 
      zip_code : $('#some_imput_box').val() 
     }); 
     $('#billing_postcode_gemeente').DataTable().destroy(); 
     initDatatable(); 
    } 

Answer 2

尝试这种方式

$(".js-data-example-ajax").select2({ 
    ajax: { 
     url: "https://api.github.com/search/repositories", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       q: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function (data, page) { 
      // parse the results into the format expected by Select2. 
      // since we are using custom formatting functions we do not need to 
      // alter the remote JSON data 
      return data.items; 
     }, 
     cache: true 
    }, 
    minimumInputLength: 1, 
    templateResult: formatRepo, // omitted for brevity, see the source of this page 
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page 
});