Select2 js - 设置 ajax 对下拉菜单的响应

Question

我有大量（20k 到 25k）密码列表，所以我希望用户首先搜索 3 位密码然后触发 ajax 请求以获取与 3 位匹配的密码列表。

我能够从服务器获得响应，但现在如何在 select2 下拉列表中设置此响应？

我的代码如下：

Html code

<select id="mcp_pincode">
   <option value="0">&nbsp;</option>
</select>

Jquery code

$('#mcp_pincode').select2({
        minimumInputLength: 3,

        ajax: {
            type: 'get',
            url: base_path + '/mcp/pincode',
            data: function (params) {
                return {
                    q: params.term
                };
            },

            success: function (data) {

                console.log(data); // server response show here.

                var pincode="<option value='0'>&nbsp;</option>";
                for(var i=0; i<data.length;i++){
                    // console.log(data[i].state_name);

                    pincode+="<option value=\""+data[i].pincode+"\">"+data[i].pincode+"</option>";

                }
                $('#mcp_pincode').html(pincode);

            }
        }
    });

server response result

[{pincode:"110001"},{pincode:"110002"},{pincode:"110003"}]

Answer 1

Select2 JS 有自己的方式来处理 ajax 响应的结果。他们有关于如何实现这一点的非常好的文档 here。

试试看是否select 填充了所需的数据。

$('#mcp_pincode').select2({
    minimumInputLength: 3,

    ajax: {
        type: 'get',
        url: base_path + '/mcp/pincode',
        dataType: "json",
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data, params) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.pincode,
                        id: item.pincode,
                        data: item
                    };
                });
            };
        }
    }
});

更新

还注意到服务器的响应无效 JSON。格式化响应，使其看起来如下所示，

[
    {
        "pincode": "110001"
    },
    {
        "pincode": "110002"
    },
    {
        "pincode": "110003"
    }
]

希望这对您有所帮助。如果您有任何问题，请在下方评论。