Question

I have a Google Instant style search script written in jQuery. When a user searches, a URL is created which is something like #search/QUERY/3/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be?

Here is my jQuery code:

$(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var page=1;
        var yt_url='search.php?q='+query+'&category=web&d='+page+'';
        window.location.hash='search/'+query+'/'+page+'/';
        document.title=$(this).val()+" - My Search Script";
        if(search==''){
            window.location.hash='';
            document.title='My Search Script';
        }
        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                if(response !=""){
                $("#result").html(response);
                } else {
                $("#result").html("Your search did not return any results");
                }
            }
        });
    });
if(window.location.hash.indexOf('#search/')==0){
    query=window.location.hash.replace('#search/', '').replace('/1/', '');
    $('#search').val(decodeURIComponent(query)).keyup();
}
});

I think it could be something to do with these lines of code:

if(window.location.hash.indexOf('#search/')==0){
    query=window.location.hash.replace('#search/', '').replace('/1/', '');
    $('#search').val(decodeURIComponent(query)).keyup();
}

Answer 1

You need to write a function for the search so you can specify the page number.

$(document).ready(function(){
  var search = function (query, page) {
    page = page ? page : 1;
    query = encodeURIComponent(query),
    var yt_url = 'search.php?q=' + query + '&category=web&d=' + page + '';
    if (query == '') {
        window.location.hash = '';
        document.title = 'My Search Script';
    } else {
      window.location.hash = 'search/' + query + '/' + page + '/';
      document.title = $(this).val() + " - My Search Script";
    }
    $.ajax({ ... });
  };

  $("#search").keyup(function(){ search(this.value); });

  if (window.location.hash.indexOf('#search/') == 0) {
    var query = window.location.hash.replace('#search/', ''),
      page = query.replace(/.+?\/(\d+)\//, '$1');
    query = query.replace(/\/\d+\//, '');
    search(decodeURIComponent(query), page);
  }
});