3

geonames データを使用して select2 要素を設定しようとしています。formatSelection メソッドを定義しましたが、項目が選択されたときに起動しません。

HTML要素は次のとおりです。

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

フォーマット関数を使用した Select2 バインディング:

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/

アイテムの選択が機能しないのはなぜですか?

4

1 に答える 1

11

私はそれを考え出した。要素で 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/

于 2012-11-05T18:03:10.730 に答える