Question

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

我能从服务器获得响应，但现在如何在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响应结果的方法。他们有关于如何实现这一目标的非常好的文档here。

尝试此操作以查看是否选择了填充所需数据。

$('#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"
    }
]

希望这会有所帮助。如果您有任何疑问，请在下面发表评论。

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

1 个答案: