Javascript 无法获取select2+；地理名称一起工作

我无法同时使用select2和geonames。我可以生成城市列表，但不能选择任何城市作为选择选项

HTML

乔伊恩维尔爵士酒店

JS

函数formatRepo（repo）{
if（回购加载）返回回购文本；
var markup=“”+
"" +
“+repo.toponymName+”；
返回标记；
}
功能选择（repo）{
返回repo.toponymName；
}  
$（文档）.ready（函数（）{
$（“#城市”）。选择2({
阿贾克斯：{
url:“http://ws.geonames.org/searchJSON",
数据类型：“json”，
数据：函数（参数）{
返回{
用户名：'xxx'，
特色类：“P”，
样式：“完整”，
q:params.term，//搜索项
页码：params.page，
国家：“CH”
};
},
成功：功能（数据）{
console.log（'Success！'，data.geonames）；
},
processResults：函数（数据、参数）{
//将结果解析为Select2所需的格式
//因为我们使用的是自定义格式函数，所以不需要
//更改远程JSON数据，除非指示无限
//可以使用滚动
params.page=params.page | | 1；
返回{
结果：data.geonames，
分页：{
更多：（params.page*30）

你可以在这里看到小提琴：[

---

有人知道我为什么不能选择一个城市吗？

经过几个小时的反复试验，我终于找到了答案。希望这对任何人都有帮助

因此，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,

      };
}

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
    });

});

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,

      };
}