Question

I have a search script like Google Instant search which displays the relevant results as you type. It is written in JSON and currently does not form a URL when a user types a search, instead it stays the same. How can I make it so each search has a URL? 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

You can use javascript location.hash to store the query-string and make the URL unique. Remember any change in the location.hash gets recorded in the browser-history and that makes a difference.

When user submits the button add the search keyword in the location-hash like

$("#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';
window.location.hash = keyword;

So now every URL will have a unique URL with search-keyword as it’s hash-value, something like

http://www.example.com/search#q=usefull

http://www.example.com/search#q=another+keyword

etc.