Select2 js -将ajax响应设置为下拉列表

Question

我有大的(20k到25k)的pincode列表，所以我希望用户首先搜索3位的pincode，然后发出ajax请求，以获得与3位数字匹配的pincode列表。

我可以从服务器获得响应，但是现在如何在select2下拉列表中设置响应呢？

我的代码如下:

Html代码

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

Jquery代码

$('#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);

            }
        }
    });

服务器响应结果

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

Answer 1

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

尝试此操作，以查看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"
    }
]

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