无法选择在select2中通过jsonp填充的项目

Question

我正在尝试使用geonames数据填充select2元素。我有一个formatSelection方法定义，但不会在选择某个项目时触发。

这里的HTML元素：

<input id="location" size="30" type="text">​ 

选择二与格式功能结合：

function locationFormatResult(location) { 
    var markup = "<table class='location-result'><tr>"; 

    if (location.countryCode !== undefined) { 
     markup += "<td class='flag-image'><img src='http://www.geonames.org/flags/x/" + location.countryCode.toLowerCase() + ".gif' /></td>"; 
    } 

    markup += "<td class='location-info'>"; 
    markup += "<div class='location-name'>" + location.name + ", " + location.adminName1 + ", " + location.countryName + "</div>"; 
    markup += "</td></tr></table>"; 

    return markup; 
} 

function locationFormatSelection(location) { 
    return location.name + ", " + location.adminName1 + ", " + location.countryName; 
} 

$(function() { 
    $('#location').select2({ 
     placeholder: 'Location', 
     allowClear: true, 
     width: '260px', 
     minimumInputLength: 2, 
     ajax: { 
      url: 'http://ws.geonames.org/searchJSON', 
      dataType: 'jsonp', 
      data: function (term) { 
       return { 
        featureClass: 'P', 
        q: term 
       }; 
      }, 
      results: function (data) { 
       return { 
        results: data.geonames 
       }; 
      } 
     }, 
     formatResult: locationFormatResult, 
     formatSelection: locationFormatSelection, 
     dropdownCssClass: "bigdrop" 
    }); 
}); 

你可以看到完整的小提琴的位置：http://jsfiddle.net/6CVbw/1/

为什么选择一个项目不工作？

Answer 1

我想通了。当你在一个元素上实例化select2插件时，你必须指定一个ID属性。这工作：

$(function() { 
    $('#location').select2({ 
     id: function(e) { return e.name + '|' + e.adminName1 + '|' + e.countryName }, 
     placeholder: 'Location', 
     allowClear: true, 
     width: '260px', 
     minimumInputLength: 2, 
     ajax: { 
      url: 'http://ws.geonames.org/searchJSON', 
      dataType: 'jsonp', 
      data: function (term) { 
       return { 
        featureClass: 'P', 
        q: term 
       }; 
      }, 
      results: function (data) { 
       return { 
        results: data.geonames 
       }; 
      } 
     }, 
     formatResult: locationFormatResult, 
     formatSelection: locationFormatSelection, 
     dropdownCssClass: "bigdrop" 
    }); 
}); 

你可以看到更新的小提琴这里：http://jsfiddle.net/6CVbw/2/