Select2 js - ドロップダウンリストにAjaxレスポンスを設定する

Question

私は大型（20k〜25k）のピンコードのリストを持っているので、まず3桁のピンコードを検索し、3桁のピンコードのリストを取得するajaxリクエストを発する。

私はサーバーから応答を受け取ることができましたが、今は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" 
    } 
] 

希望します。ご不明な点がございましたら、下記にご意見ください。