JQuery自动完成并从JSON提要中获取额外数据

时间:2011-04-03 13:23:25

标签: jquery jquery-ui

我有以下jquery,它从优秀的geonames.org网络服务中读取:

$('#<%=txtFindMyCity.ClientID%>').autocomplete("http://ws.geonames.org/searchJSON", {
            dataType: 'jsonp',
            parse: function (data) {
                var rows = new Array();
                data = data.geonames;
                for (var i = 0; i < data.length; i++) {
                    rows[i] = { data: data[i], value: data[i].name, result: data[i].name };
                }
                return rows;
            },
            formatItem: function (row, i, n) {
                $('#lat').val(row.lat); //<---- THIS
                $('#lon').val(row.lng); //<---- AND THIS
                return row.name + ', ' + row.adminName1 + ' ' + row.adminName2 + ' ' + row.adminName3 + row.lat + row.lng;
            },
            extraParams: {
                // geonames doesn't support q and limit, which are the autocomplete plugin defaults, so let's blank them out.
                q: '',
                limit: '',
                country: '<%=Session["BusinessCountry"].ToString()%>',
                featureClass: 'P',
                style: 'full',
                maxRows: 50,
                name_startsWith: function () {
                    return $('#<%=txtFindMyCity.ClientID%>').val()
                }
            },
            max: 50
        }).result(function (event, data, formatted) {
            var selectedcity = $('#<%=txtFindMyCity.ClientID%>').val();
            $('#citymap').show('slow');
            $('#resultsmap').googleMaps({
                latitude: $('#lat').val(),
                longitude: $('#lon').val(),
                controls: {
                    type: {
                        control: ''
                    },
                    zoom: {
                        control: 'GSmallZoomControl'
                    }
                }
                //geocode: selectedcity + ' <%=ddlCountry.SelectedItem.Text%>',
            });

        });

我遇到的问题是,我希望标记数据。从formatItem内部可以看到,该服务返回lat和lon,但我不知道如何获取它。我尝试设置输入的值 - 这种方式有效 - 但它只获得了数据源中的第一个,而不是选中的。我有result(function(event, data, formatted)方法,但datadata[0|1]永远不会返回任何内容。

我不知所措!任何人都可以提供的任何帮助都很棒:)

1 个答案:

答案 0 :(得分:2)

我想我现在看到你正在尝试做什么,也许你会怎么做。您希望在选中项目时访问latlng以及name的值(这是result函数要执行的操作)。< / p>

这应该有效:

$('#<%=txtFindMyCity.ClientID%>').autocomplete("http://ws.geonames.org/searchJSON", {
        //all your existing options go here
    }).result(function (event, data, formatted) {
            //access the lat, lng and name of the selected option:
            console.log("You selected ", data.name, data.lat, data.lng);
        });

    });