It's pretty easy to do, actually. What you're doing is wrong. You don't have to use onLoading etc..
All you have to do is to add after minChars: 2
• frequency: 0.5 = time autocompleter checks input for changes
• indicator: 'searching' = is the ID of the div that should be shown while ajax is running.
so it becomes
initAutocomplete : function(url, destinationElement){
new Ajax.Autocompleter(
this.field,
destinationElement,
url,
{
paramName: this.field.name,
method: 'get',
minChars: 1,
frequency: 0.5, // NOTICE THIS
indicator: 'searching', // AND THIS
updateElement: this._selectAutocompleteItem.bind(this),
onShow : function(element, update) {
Effect.Appear(update,{duration:0});
}
}
);
},
so after that in your, I guess is the form.mini.phtml but you can place where you want (don't forget to style it etc.)... go to: app/design/frontend/default/[THEME NAME]/template/catalogsearch/form.mini.phtml
and after the input, add this code:
<div id="searching" style="display: none;">
<img alt="" src="ajax-loader.gif">
</div>
that's it.