select2とgeonamesが一緒に働くようにする

Question

select2とgeonamesを一緒に使うのに問題があります。私は都市のリストを生成することができますが、選択肢として選択することはできません。

HTML

<select id="cities" name= "cities"> 
    <option value="3620194" selected="selected">Choisir une ville</option> 
</select> 

JS

function formatRepo (repo) { 
     if (repo.loading) return repo.text; 

     var markup = "<div class='select2-result-repository clearfix'>" + 
     "<div class='select2-result-repository__meta'>" + 
      "<div class='select2-result-repository__title'>" + repo.toponymName + "</div>"; 

     return markup; 
    } 

    function formatRepoSelection (repo) { 
     return repo.toponymName; 
    } 

$(document).ready(function() { 



    $('#cities').select2({ 
     ajax: { 
      url: "http://ws.geonames.org/searchJSON", 
      dataType: "json", 
      data: function (params) { 
       return { 
        username:'xxx', 
        featureClass: "P", 
        style: "full", 
        q: params.term, // search term 
        page: params.page, 
        country: "CH" 
       }; 

      }, 

      success: function(data) { 
       console.log('Success!', data.geonames); 
      }, 
      processResults: function (data, params) { 
       // 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; 

       return { 
        results: data.geonames, 
        pagination: { 
         more: (params.page * 30) < data.total_count 
        } 
       }; 
      }, 
     }, 

     escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
     minimumInputLength: 1, 
     templateResult: formatRepo, 
     templateSelection: formatRepoSelection 
    }); 

}); 

あなたはここにフィドルを見ることができます：[私は都市を選択することができない理由https://jsfiddle.net/rjvLuof4/][1]

、誰もが知っていますか？

Answer 1

数時間の試行錯誤の末、私はこれを理解することができました。誰も助けることを願っています。

したがって、Select2は基本的にprocessResultsでIDとテキストを受け取る必要があります。

geonamesが "geonameId"と "toponymName"を与えるので、あなたがしなければならないことは、それらをIDとテキストにマッチさせることだけです。ここで

はコードです：

processResults: function (data) { 

     data = $.map(data.geonames, function (obj) { 
      obj.id = obj.id || obj.geonameId; 
      obj.text = obj.text || obj.toponymName; 
      return obj; 
     }); 
     return { 

     results: data, 

     }; 
}