jquery移动开放层搜索

时间:2014-06-30 02:55:38

标签: javascript jquery json mobile

所有,我有jquery移动开放层搜索的问题;

$('#searchpage').live('pageshow',function(event, ui){
$('#query').bind('change', function(e){
    $('#search_results').empty();
    if ($('#query')[0].value === '') {
        return;
    }
    $.mobile.showPageLoadingMsg();

    // Prevent form send
    e.preventDefault();

    var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
    searchUrl += '&name_startsWith=' + $('#query')[0].value;
    $.getJSON(searchUrl, function(data) {
        $.each(data.geonames, function() {
            var place = this;
            $('<li>')
                .hide()
                .append($('<h2 />', {
                    text: place.name
                }))
                .append($('<p />', {
                    html: '<b>' + place.countryName + '</b> ' + place.fcodeName
                }))
                .appendTo('#search_results')
                .click(function() {
                    $.mobile.changePage('#mappage');
                    var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
                    map.setCenter(lonlat.transform(gg, sm), 10);
                })
                .show();
        });
        $('#search_results').listview('refresh');
        $.mobile.hidePageLoadingMsg();
    });
});

// only listen to the first event triggered
$('#searchpage').die('pageshow', arguments.callee);
});

`

我的问题是,我有json文件,但我不知道如何使用我的json文件更改搜索URL。我需要一些帮助。

非常感谢

1 个答案:

答案 0 :(得分:0)

因为您没有明确说明,我假设您一直在获取搜索结果,您还希望使用您希望使用的JSON文件返回的另一个更新您的searchUrl进行下一次搜索。

在这种情况下,如果没有对当前代码进行大规模手术,最简单的方法是将searchUrl作为全局变量提升,并包含更新它的方法。

var jsonUrl = {
    param: 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10',
    update: function (url) {
        this.param = url;
    }
};

改变这个:

var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
searchUrl += '&name_startsWith=' + $('#query')[0].value;

对此:

var searchUrl = jsonUrl.param + '&name_startsWith=' + $('#query')[0].value;

假设您的新json url位于contains(your_json_object).url中,请在$ .getJSON闭包之前添加一行:

jsonURL.update(data.url);

您的最终代码应如下所示:

var jsonUrl = {
    param: 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10',
    update: function (url) {
        this.param = url;
    }
};

$('#searchpage').live('pageshow',function(event, ui){
$('#query').bind('change', function(e){
$('#search_results').empty();
if ($('#query')[0].value === '') {
    return;
}
$.mobile.showPageLoadingMsg();

// Prevent form send
e.preventDefault();

var searchUrl = jsonUrl.param + '&name_startsWith=' + $('#query')[0].value;
$.getJSON(searchUrl, function(data) {
    $.each(data.geonames, function() {
        var place = this;
        $('<li>')
            .hide()
            .append($('<h2 />', {
                text: place.name
            }))
            .append($('<p />', {
                html: '<b>' + place.countryName + '</b> ' + place.fcodeName
            }))
            .appendTo('#search_results')
            .click(function() {
                $.mobile.changePage('#mappage');
                var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
                map.setCenter(lonlat.transform(gg, sm), 10);
            })
            .show();
    });
    $('#search_results').listview('refresh');
    $.mobile.hidePageLoadingMsg();
});
});

// only listen to the first event triggered
$('#searchpage').die('pageshow', arguments.callee);

//add this to update new URL retrieved into your jsonUrl object.
jsonURL.update(data.url);
});