16

Select2には、ajaxのネイティブメソッドがあるため、ChosenからSelect2への移行を考えています。通常、多くのデータをロードする必要があるため、Ajaxは重要です。jquery-select2 multi for ajaxのJSON形式

私はAJAXをテストするためにJSONファイルをしましたが、それは作品なかったapi.rottentomatoes.com/api/

のJSONでsucessfully例を実行します。

JSONの仕組みがわかりません。

https://github.com/ivaynberg/select2/issues/920

は私がunsucessfullyいくつかの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に切り替えた場合

http://jsfiddle.net/Katio/H9RZm/4/

+1

良い質問メイト、SELECT2 Ajaxのセクションのドキュメントは、私には意味をなされていない、私は多くの人がこの質問を持っているだろうと確信しています。 –

答えて

31

あなたは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 
} 

が、これはあなたが開始を取得願っています。

+1

ありがとう、おめでとう、Select2は本当にクールです。私は "より多くの"パラメータが不足していましたが、api.rottentomatoes jsonにはより多くのパラメータがありません。いずれにせよ、それは今私のために働く。あなたの答えをありがとう。 –

+0

私は、Select2のドキュメントからGoogleまで、そして最終的にここまでサークルでラウンドしていました。この答えは本当に私を助けました。なぜあなたは1ライナー以上の詳細な文書を持っていないのですか?私は読んでロシア語のように感じて意味がありません –

+2

明らかに、select2 4.0.0では、デフォルトの受け入れられたフォーマットは{results:[{id: 'CA'、テキスト形式: 'California'}、{ID: 'CO'、テキスト: 'Colarado'}、ページ番号:{more:false}}(ページ区切り属性に注意してください) – personne3000

0

必要なJSON形式の公式ドキュメント: ref。 https://select2.org/data-sources/formats

{ 
    "results": [ 
    { 
     "id": 1, 
     "text": "Option 1" 
    }, 
    { 
     "id": 2, 
     "text": "Option 2" 
    } 
    ], 
    "pagination": { 
    "more": true 
    } 
}