display loader gif whilst ajax request fetched

We have some code we use, that as the user types it fetches via ajax, the search results.

The issue I have is I don't wan开发者_运维问答t a submit button, we want the code to display a loader gif (ala FaceBook style pips) whilst the content is fetched. When there is success, hide the loader.

Input Element:

<input name="suburbs"  autocomplete="off" class="suburbsreviews" type="text" id="terms" size="50" onkeyup="getScriptPage('show_results','terms','1')" onblur="if ( this.value == '' ) this.value = this.defaultValue" onfocus="if ( this.value == this.defaultValue ) this.value = ''" <?if ($_GET['terms']){?>value="<?=$_GET['terms'];?>"<?}else{?>value="search"<?}?> />

I thought I would add a loading span that I can position in the input element absolutely using:

<span class="loader">Loading...</span>

Plus, I thought this code may work by displaying the loading pips:

$.loader({
onAjax: true,
align: 'center',
img: 'images/facebook/pip.gif',
mask: true
});

It isn't working. Any ideas why? I use the latest jQuery.

I think you're over complicating things, here's a function I use:

function setAreaTree(){
$('#projecthierarchy').html('<center><br><br><br><br><img src="img/loading_eeeeee.gif"></center>');
$.ajax({
    url: "sitemanager/sitemanager_ajax.php",
    data: {
        action:'getsidebar',
        pid:pid,
        aid:curaid,
        openareas:openareabars
    },
    success: function(data) { 
        $('#projecthierarchy').html(data)
    }
}); 

}

So I just have a single div with id="projecthierarchy". Immediately when the event is fired, the loader gif pops in, then when the ajax call returns successfully, it puts clobers that div with the content.

Does that work for you?