Scriptaculous Ajax.Autocompleter loading bar

Question

I need to add a spinning wheel (loading bar) on an Ajax request done thru Prototype's Scriptaculous' Ajax.Autocompleter . But unfortunately I've never worked with these frameworks... and there's no way, in this case, to switch to jQuery... Documentation is poor and couldn't find nothing on net.

Code below, is part of Magento js.js file ( http://pastebin.com/UUAEEAkR ) line 339 ( I've tried to add a onLoading before onShow but nothing happened... so I don't really know what to do )

initAutocomplete : function(url, destinationElement){
    new Ajax.Autocompleter(
        this.field,
        destinationElement,
        url,
        {
            paramName: this.field.name,
            method: 'get',
            minChars: 2,
            updateElement: this._selectAutocompleteItem.bind(this),
            onShow : function(element, update) {
                Effect.Appear(update,{duration:0});
            }

        }
    );
},

Answer 1

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.