0

select2 選択メニューが機能しています (リモート ジオバイトからの状態) が、同じインデックス ID を持つオプションを選択できません。たとえば、「new」を検索すると、いくつかのオプションが表示され、最初のオプションである New Albany, IN を選択できます。次に、「far」と入力すると、最初のオプションはニュージャージー州ファー ヒルズです。それを選択すると、インデックス 1 を持つインディアナ州アルバニーが表示されます。

リモートデータをロードする例https://select2.github.io/examples.html#data-ajaxを試しました。同じようには動作しないので、結果の解析が間違っているのではないかと思っています。検索するたびに、インデックスが 1 から始まる新しいオブジェクトが返されます。

$('#input_3_4').select2({
      ajax: {
        url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US",
        dataType: 'json',
        quietMillis: 1500,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
          for(var i = 0; i < data.length; i++){
             data[i] = {id:i+1, text:data[i]};
          }
          // parse the results into the format expected by Select2
          // since we are using custom formatting functions we do not need to
          // alter the remote JSON data, except to indicate that infinite
          // scrolling can be used
          params.page = params.page || 1;
          console.log(data);
          return {
            results: data,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };

        },
        cache: true,
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 3,
      //templateResult: formatRepo, // omitted for brevity, see the source of this page
      //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
   });
4

1 に答える 1

0 
    var dataIndex = 1; //<<=====HERE
    //select2 state selector with geobytes remote data source
    $('#input_3_4').select2({
      ajax: {
        url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US",
        dataType: 'json',
        quietMillis: 1500,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
          for(var i = 0; i < data.length; i++){
             data[i] = {id:dataIndex, text:data[i]}; //<<=====HERE
             dataIndex++; //<<=====HERE
          }
          // parse the results into the format expected by Select2
          // since we are using custom formatting functions we do not need to
          // alter the remote JSON data, except to indicate that infinite
          // scrolling can be used
          params.page = params.page || 1;
          console.log(data);
          return {
            results: data,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };

        },
        cache: true,
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 3,
      //templateResult: formatRepo, // omitted for brevity, see the source of this page
      //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
   });
于 2015-12-24T03:09:24.883 に答える