Question

I have a search script like Google Instant search which displays the relevant results as you type. It is written in JSON and uses JavaScript to make a URL of the result as the user types. However, if you click on a result and then come back to the SERP there are no results displayed. You have to start your search again. Why could this be? I hope you can understand what I am trying to describe.

Here is my HTML code:

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

Here is my JSON code:

$(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);
                    });
                }
            }
        });
    });
});

Answer 1

If i understand you correctly you are doing a full page load to go to a result, and when you go back you do another full page load.

Basically if you want to persist the search results over pageloads you will have to store the searchquery in session scope or as a cookie, and when the session/cookie is present the javascript code will have to issue the search as if it was typed in the searchfield.

So when go you click on a result, and you go back, the javascript it smart enough to know that this is a returning user who previously did a search. And populate the same results into the DOM.

DOM changes are NOT persisted over pageloads.