0

jqueryオートコンプリートを使用して、GeoNamesからページのテキストボックスに都市をロードしています。

$("#MyInput").autocomplete({
source: function (request, response) {
    $.ajax({
        url: "http://ws.geonames.org/searchJSON",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 10,
            name_startsWith: request.term
        },
        success: function (data) {
            response($.map(data.geonames, function (item) {
                return {
                    label: item.name + ", " + item.countryName,
                    value: item.name + " (" + item.countryName + ")" + " [" + item.countryCode + "]"
                };
            }));
        }
    });
}
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a><strong>" + item.label + "</strong> / " + item.value + "</a>")
        .appendTo(ul);
};

また、_renderItemをオーバーライドして、オートコンプリートの結果をカスタムビューに表示しようとしていますが、このメソッドはアイテムに影響しません。私のコードの何が問題になっていますか？jsfiddle.net/で例を見つけることができます

4

1 に答える 1

1

テキストボックスの「データ」を設定したい場所でこれを実行しました。私の場合、「データ」を表示したくありませんでした。dataというマップを実行するときに3番目の値を「追加」し、それを「item」に設定してから、「select」セクションを指定しました。下記参照。

    $(document).ready(function () {
        var $birds = $("#birds")
        $birds.focus();
        mURL = "my url here";
        $birds.autocomplete({
            minLength: 0,
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    url: GW.Common.getBaseURL() + "/Functions/EmailCounts/TypeAHead.aspx/country_state_city",
                    data: "{'text':'" + request.term + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        var jsonData = $.parseJSON(msg.d)[0].Cities;
                        response($.map(jsonData, function (item) {
                            return {
                                label: item.name + ', ' + item.state + ' ' + item.country,
                                value: item.name + ', ' + item.state + ' ' + item.country,
                                data: item // added as "extra"
                            };
                        }));
                    },
                    error: function (msg) {
                        alert(msg.status + ' ' + msg.statusText);
                    }
                })
            },
            focus: function (event, ui) {
                $birds.val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
                $birds.val(ui.item.label);
                $birds.attr("data", JSON.stringify(ui.item.data)); // now you can use the extra "data" you set in success.
                return false;
            }
        });
于 2013-08-16T15:11:17.047 に答える