Question

I have a jQuery search script based on the Bing API. When a user searches and their are results for their query they are displayed without a problem. However when there are no results for their search then the page is just blank.

How can I add a message in such as “No results found.” when there are no results to prevent having a blank page?

My current code is:

$(document).ready(function(){
    function search(){
        $.ajax({
            type:"GET",
            url:"http://api.bing.net/json.aspx?AppId=AppIdHere&Query=SearchTermsHere&Sources=Web&Adult=Strict&Web.Count=10&JsonType=callback&JsonCallback=?",
            dataType:"jsonp",
            success:function(query){
                $("#results").html(results(query));
            }
        });
    }
    function results(response){
        var output=[];
        $.each(response.SearchResponse.Web.Results,function(i,result){
            output.push('<a href="'+result.Url+'" class="result"><div class="title">'+result.Title+'</div><div class="url">'+result.DisplayUrl+'</div><div class="desc">'+result.Description+'</div></a>');
        });
        return output.join('');
    }
    search();
});

Answer 1

Change the return line of the results function to:

return (output.length == 0 ? 'No results found.' : output.join(''));

=== UPDATE ===

If you have an javascript error, change the results function to:

function results(response){
    if (typeof response.SearchResponse.Web.Results == 'undefined') {
        return 'No results found.';
    }
    var output=[];
    $.each(response.SearchResponse.Web.Results,function(i,result){
        output.push('<a href="'+result.Url+'" class="result"><div class="title">'+result.Title+'</div><div class="url">'+result.DisplayUrl+'</div><div class="desc">'+result.Description+'</div></a>');
    });
    return output.join('');
}

or you have to add an error-handler:

    $.ajax({
        ...,
        error:function(){
            $("#results").html('No results found.');
        }
    });