Select2 - Ajax 数据 - 根据查询填充下拉列表

Posted 2023-05-07

【中文标题】Select2 - Ajax 数据 - 根据查询填充下拉列表

【英文标题】：Select2 - Ajax Data - Populate The Dropdown based on query

【发布时间】：2015-07-08 15:04:59

【问题描述】：

我正在使用 Select2 填充英国城镇的下拉列表。由于 UK Towns DB 很大，我认为 AJAX 调用将是引入数据的最佳方式。

我已经构建了一个 post 函数和一些 php（在 Codeigniter 中）来捕获查询并解析它。

我可以看到数据正在发布和响应，但我的 Select2 没有填充数据。

我的 jQuery 是：

 $("#areas").select2(
    
        tags: [],
        ajax: 
            url: '/profile/get-towns',
            dataType: 'json',
            type: "POST",
            quietMillis: 100,
            data: function (term) 
                return 
                    query: term
                ;
            ,
            results: function (data) 
                return 
                    results: data.town_id
                
            ,
            cache: true
        ,
        escapeMarkup: function (markup)  return markup; , // let our custom formatter work
        minimumInputLength: 4,
        placeholder         : "Start typing your Town / City",
        maximumSelectionSize: 2
    
);

我的回答 jSON (Example) 如下：

["town_id":"16994","town":"Hartle","town_id":"16995","town":"Hartlebury","town_id":"16996","town"
:"Hartlebury","town_id":"16997","town":"Hartlebury Common","town_id":"16998","town":"Hartlepool"
,"town_id":"16999","town":"Hartley","town_id":"17000","town":"Hartley","town_id":"17001","town"
:"Hartley","town_id":"17002","town":"Hartley","town_id":"17003","town":"Hartley Green","town_id"
:"17004","town":"Hartley Green","town_id":"17005","town":"Hartley Mauditt","town_id":"17006","town"
:"Hartley Wespall","town_id":"17007","town":"Hartley Wintney","town_id":"27051","town":"New Hartley"
,"town_id":"35891","town":"Stowe-by-Chartley"]

我哪里错了？理想情况下，我希望选择下拉列表具有选择值 = town_id 和选择选项作为城镇名称。

谢谢。

【参考方案1】：

在您的 select2 配置中：

results: function (data) 
    var res = [];
    for(var i  = 0 ; i < data.length; i++) 
        res.push(id:data[i].town_id, text:data[i].town);
    
    return 
        results: res
    
,

因为 select2 想要将结果作为带有键 id 和 text 的对象数组。

否则你已经可以返回一个格式良好的对象

[
   "id":"16994","text":"Hartle",
   "id":"16995","text":"Hartlebury",
   "id":"16996","text":"Hartlebury",
   "id":"16997","text":"Hartlebury Common"
]

然后

results: function (data) 
    return 
        results: data
    
,

【讨论】：

我只想指出，在 4.0.0 中，我们已将 results 重命名为 processResults，但同样的想法仍然适用（您需要 id 和 text 键）。跨度>

是的。新规格要processResults。

【参考方案2】：

在您的 ajax 调用中，尝试添加 success。像这样的：

success: function( json ) 
   $.each(items, function (i, item) 
       $('#mySelect').append($('<option>',  
           value: item.value,
           text : item.text 
       ));
   );

【讨论】：

在成功函数中，只需添加警报或日志以检查“json”对象是否返回数据。它应该打印数据。如果它返回，则问题出在追加上。告诉我

Select2 提供了自己的“成功”处理程序（OP 使用），无需绕过 Select2 生成结果的方式。