Removing hash from fancy jQuery URL

I have a Google Instant style search script written in jQuery. When the user queries, #search/SEARCHTERM/1/ is added onto my page URL. How can I make it so that my URL is without the # at the start?

Here is my current jQuery code:

$(document).ready(function(){
    $("#search").keyup(functio开发者_如何学运维n(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q='+query+'&category=web';
        window.location.hash='search/'+query+'/1/';
        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){
                $("#result").html(response);
            }
        });
    });
});

---

You cannot remove the hash from hash :) but you can alter the whole url With the pushState() method.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

...

URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL.

Note that this won't work in older browsers and you have to have content behind every url you generate with JS.

---

You are changing the "window.location.hash". It will be difficult to remove the hash from the hash :)

Did you mean to change "window.location" ?

---

To do it without a URL hash or the query string, you would probably need to do some URL rewriting on the backend.

You could do it with an .htaccess file that looks something like this:

DirectoryIndex search.php    
RewriteEngine on

# If the requested file or directory does not exist
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# silently redirect to the search page
RewriteRule ^search/(.*)$ search.php?q=$1 [L,QSA]

The jQuery code would still need to use a search string to query the PHP script but from the client's point of view the URLs would would use the search/searchterm/1/ style.

As Epeli noted, to do this without the hash and without forcing a page reload constantly, you will need to use history.pushState() to change the URL instead of changing window.location.

If you need some help integrating pushState() into your jQuery code I can update this later.