2017-06-01 8 views
1

Controller側からSelect2要素にデータをインポートすることが目的です(複数選択をオンに切り替えて)。私はセットアップがスタックオーバーフローのタグボックスのように見えるようにしたい。ここではタグの入力を開始し、それを選択して、後で別のタグを選択することができる。AJAXを使用してSelect2にJSONベースのリモートデータをインポート

私はSelect2のドキュメントを参照として使用していますが、リクエストはコントローラに送信されていません。

Select2 Documentation

マイコード:

$(".jsData").select2({   
    ajax: { 
     contentType: 'application/json', 
     url: '<%=Url.Action("GetDataMethod","RelevantController")%>', 
     type: 'POST', 
     dataType: 'json', 
     data: function (term) { 
      return { 
       sSearchTerm: term 
      }; 
     }, 
     results: function (data) { 
      var datajs = $.map(data, function (obj) { 
       obj.text = obj.someterm; // desired field, 
       obj.id = obj.someId; 
       return obj; 
      }); 
      return { 
       results: JSON.parse("[" + datajs.split(",") + "]") 
      }; 
     } 
    }, 
    multiple: true   
}); 

を私は任意の助けが最もいただければ幸い、2を選択するために動的にデータを持ち込むには比較的新しいです。ありがとう!

+0

あなたは 'ASPX'・ビュー・エンジンを使用していますか? – Manoj

+0

はい、ASPX(C#)ビューエンジンを使用しています。 –

答えて

0

更新:解決策を見つけて、他の人に投稿してください。

HTML

<input class="jsData" style="width: 100%" id="select2Data" ></input> 

Javascript

   $(".jsData").select2({ 
         ajax: { 
          minimumInputLength: 4, 
          contentType: 'application/json', 
          url: '<%=Url.Action("GetData","Controller")%>', 
          type: 'POST', 
          dataType: 'json', 
          data: function (term) { 
           return { 
            sSearchTerm: term 
           }; 
          }, 
          results: function (data) { 
           return { 
            results: $.map(JSON.parse(data), function (item) { 
             return { 
              text: item.term, 
              slug: item.slug, 
              id: item.Id 
             } 
            }) 
           }; 
          } 
         }, 
         multiple: true 
        }); 
関連する問題