Question

I have a Google Instant style search script written in jQuery which pulls results from a PHP script. When a user queries something, their query is displayed in the title of the page as “QUERY – My Search Script” and in the url of the page as #QUERY. However, when you delete all the text from the search box the # still stays in the url and the title says ” – My Search Script”. How can I make it so when all of the search box content is cleared, the script removed the title and the #?

My jQuery code is:

$(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q='+query+'&category=web';
        window.location.hash=query;
        document.title=$(this).val()+" - My Search Script";

        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                $("#result").html(response);
            }
        });
    });
});

Answer 1

Try this:

$(document).ready(function() {
    $('#search').keyup(function() {
        var search = $(this).val();
        if(search == '') {
            window.location.hash = '';
            document.title = 'My Search Script';
            $('#result').empty();
        }
        else {
            window.location.hash = encodeURIComponent(search);
            document.title = search + ' - My Search Script';

            $.ajax({
                type: 'GET',
                url: 'search.php',
                data: {q: search, category: 'web'},
                dataType: 'html',
                success: function(response){
                    $('#result').html(response);
                }
            });
        }
    });
});

I’ve used the data option of $.ajax so that you don’t need to build the url yourself.

I don’t think you can guarantee to get rid of the hash in the URL: Some browsers remove it, others don’t.