2012-09-12 5 views
6

私は、Javascript、jQuery、Ajax、およびjSONの世界が初めてです。私がする必要がどのようなSelect2の組み合わせプレースホルダ付きリモートデータの読み込みドロップダウン

はSELECT2で使用可能な2つのオプション

プレースホルダ

$("#e2_2").select2({ 
    placeholder: "Select a State" 
}); 

あなたから見ることができるようにリモートデータ

$("#e6").select2({ 
    placeholder: "Search for a movie", 
    minimumInputLength: 1, 
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
     url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
     dataType: 'jsonp', 
     data: function (term, page) { 
      return { 
       q: term, // search term 
       page_limit: 10, 
       apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
      }; 
     }, 
     results: function (data, page) { // parse the results into the format expected by Select2. 
      // since we are using custom formatting functions we do not need to alter remote JSON data 
      return { 
       results: data.movies 
      }; 
     } 
    }, 
    formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
}); 

のロードを混合することですウェブサイトを選択すると、これらのオプションは全く異なります。 Loading Remote Dataをクリックすると、検索オプションが開きます。しかし私はそれを望んでいません。使用可能なオプションをPlaceHolderの例でドロップダウンします。

プレースホルダの例では、ドロップダウンで使用できるオプションがHTMLにハードコードされています。 私が必要とするのは、あなたが開くと、それはjSONファイルに行き、jsonで利用可能な情報を返します。

他のSelect2の例のLoading Remote Dateの機能(サーバー上のfetch json)でPlaceholder Select2のUIを使用するのが理想です。

私は2つを組み合わせることができない場合、超高速Ajaxソリューションにはオープンです。

+0

angularuiを見る価値があります:http://angular-ui.github.com/#directives-select2 – Tosh

答えて

1

あなただけがこのようにそれを行うことができます(リモートAPI経由不要サーチ)アヤックスを経由してあなたのSELECT2にデータをロードする必要がある場合:

$.get("/path/to/your/data.json", function(data){window.ajaxData=data;}); 
$("#e2_2").select2({data: window.ajaxData, placeholder: "Select a State"}); 

(グローバル変数を使用すると、多くの場合、悪い習慣ですが、それだけです例)

関連する問題