Select2 js - 設置ajax響應下拉

Question

我有大的（20k到25k）pincode列表，所以我想讓用戶先搜索pincode的3位數字，然後發送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響應結果的方式。他們有一個非常好的文檔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 
        }; 
       }); 
      }; 
     } 
    } 
}); 

UPDATE

也注意到，從服務器的響應不是有效的JSON。格式化響應，使其看起來如下，

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

希望這會有所幫助。如果您有任何問題，請在下面評論。