2017-12-13 1 views
1

JSON応答データには、結果を表示するためにSelect2で必要となるIDフィールドが含まれていません。ドキュメントでは、IDを生成する方法を提供していますが、私はそうすることができませんでした。誰かがこれを行う方法の例を提供することはできますか?私はこれまでのところ、これを試してみました:ここajax応答データを含むSelect2生成ID

$('.itemSearch').select2(
    ajax: { 
    type: "POST", 
    url: '/Default.aspx/TestMethod', 
    data: function(params){ 
     var query={ 
      message:params.term 
     } 
     return JSON.stringify(query); 
    }, 
    processResults: function (data) { 
       var data1 = $.map(data, function (obj) { 
        obj.id = obj.id || obj.ItemNumber; // replace pk with your identifier 
        return obj; 
       });       
     return { 
     results: data.items, 
     }; 
    } 
    } 
}); 

答えて

1

SelectセレクトためのIDとしてindexmapで関数を使用して、正しい抜粋です:

var data = [{ 
 
    "text": "Test item no. 1" 
 
    }, 
 
    { 
 
    "text": "Test item no. 2" 
 
    }, 
 
    { 
 
    "text": "Test item no. 3" 
 
    }, 
 
    { 
 
    "text": "Test item no. 4" 
 
    } 
 
]; 
 

 
$('.itemSearch').select2({ 
 
    ajax: { 
 
    type: "POST", 
 
    url: '/echo/json/', 
 
    data: function(params) { 
 
     var query = { 
 
     message: params.term, 
 
     data: data 
 
     } 
 
     return { 
 
     json: JSON.stringify(query) 
 
     } 
 
    }, 
 
    processResults: function(data) { 
 
     var data1 = $.map(data.data, function(obj, idx) { 
 
     obj.id = obj.id || idx; 
 
     return obj; 
 
     }); 
 
     return { 
 
     results: data1, 
 
     }; 
 
    } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> 
 

 
<select id="myselect2" class="itemSearch" data-placeholder="click to load..." style="width:200px"> 
 
</select>

作業フィドルが利用可能ですここ:https://jsfiddle.net/beaver71/7rqg3rck/


P.S:Ajax呼び出しがあるので動作しないように、ここで

コードスニペット。

逆にJsfiddleでは、ユーザーはこれらのAjax呼び出しをシミュレートすることができますが、この例では、データは「/ echo/json /」サービスに送信され、同じAjax要求の結果として反映されます。

関連する問題