Select2にはajaxのネイティブメソッドがあるため、ChosenからSelect2に移行することを考えています。通常、大量のデータをロードする必要があるため、Ajaxは重要です。
Api.rottentomatoes.com/api/のJSONを使用してサンプルを正常に実行しました
JSONファイルを作成してajaxをテストしましたが、うまくいきませんでした。
JSONがどうあるべきかわかりません。詳細なドキュメントはないようです:
https://github.com/ivaynberg/select2/issues/92
いくつかのJSON形式を試みましたが、失敗しました。そのため、api.rottentomatoesに似たJSON形式をコピーしようとしましたが、機能しません。
バカなものが足りないかもしれません。
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
multiple: true,
ajax: {
url: url,
dataType: 'jsonp',
data: function(term, page) {
return {
q: term,
page_limit: 10,
apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey
};
},
results: function(data, page) {
return {
results: data.movies
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
/*initSelection: function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.Push({
id: item[0],
title: item[1]
});
});
//$(element).val('');
callback(data);
}*/
});
};
function formatResult(node) {
return '<div>' + node.id + '</div>';
};
function formatSelection(node) {
return node.id;
};
/*MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json');*/
MultiAjaxAutoComplete('#e6', 'https://raw.github.com/katio/Quick-i18n/master/test.json');
$('#save').click(function() {
alert($('#e6').val());
});
私はこのjsfiddleをしました:
JSONに切り替えた場合は、dataTypeをJSONPからJSONに切り替えてください。
形式は次のとおりです。 http://ivaynberg.github.io/select2/#doc-query
JSONは次のようになります。
{results: [choice1, choice2, ...], more: true/false }
基本的に、選択肢の唯一の必須属性はid
です。オプションに他の子オプションが含まれる場合(optgroupのような選択の場合など)、それらはchildren
属性内で指定されます。
デフォルトの選択および選択レンダラーは、すべての選択肢にtext
属性を想定しています-これが選択肢のレンダリングに使用されます。
デフォルトのレンダラーを使用した米国の州の完全な例は次のようになります。
{
"results": [
{
"id": "CA",
"text": "California"
},
{
"id": "CO",
"text": "Colarado"
}
],
"more": false
}
これで開始できることを願っています。
必要なJSON形式の公式ドキュメント:ref。 https://select2.org/data-sources/formats
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
],
"pagination": {
"more": true
}
}