無法選擇在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/