修复即时JSON搜索脚本的SERP的URL

时间:2011-06-03 12:19:21

标签: javascript jquery html json

我有一个像Google Instant Search这样的搜索脚本,可以在您输入时显示相关结果。它是用JSON编写的,并使用JavaScript在用户输入时生成结果的URL。但是,如果单击结果然后返回SERP,则不会显示任何结果。你必须重新开始搜索。为什么会这样?我希望你能理解我想要描述的内容。

这是我的HTML代码:

<input type="text" id="search" name="q">
<div id="result"></div>

这是我的JSON代码:

$(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var keyword=encodeURIComponent(search);
        var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web';

        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"jsonp",
            success:function(response){
                $("#result").html('');
                if(response.SearchResponse.Web.Results.length){
                    $.each(response.SearchResponse.Web.Results, function(i,data){
                        var title=data.Title;
                        var dis=data.Description;
                        var url=data.Url;
                        var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";
                        $("#result").append(final);
                    });
                }
            }
        });
    });
});

1 个答案:

答案 0 :(得分:0)

如果我理解你的话,你正在整页加载以获得结果,当你回去时你会再次加载整页。

基本上,如果您希望将搜索结果保留在页面加载上,则必须将搜索查询存储在会话范围内或作为cookie存储,并且当会话/ cookie存在时,javascript代码必须发出搜索,就像它是在搜索字段中键入。

所以,当你点击一个结果,然后你回去,它足够智能,知道这是一个以前做过搜索的回归用户。并将相同的结果填充到DOM中。

DOM更改不会保留在页面加载上。