Question

我需要在通过Prototype的Scriptaculous' Ajax.Autocompleter 完成的Ajax请求中添加一个旋转轮（加载栏）。但不幸的是，我从未使用过这些框架......在这种情况下，没有办法切换到jQuery ......文档很差，在网上找不到任何内容。

下面的代码是Magento js.js文件（http://pastebin.com/UUAEEAkR）第339行的一部分（我试图在onShow之前添加一个onLoading，但没有发生任何事......所以我真的不知道该怎么做）

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

实际上，这很容易做到。你做的是错的。你不必使用onLoading等。

您所要做的就是在minChars: 2

之后添加

•频率：0.5 =时间自动完成程序检查输入的更改

•指示符：＆＃39;搜索＆＃39; =是ajax运行时应显示的div的ID。

所以它变成了

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});
            }

        }
    );
},

所以在你之后，我猜是 form.mini.phtml ，但你可以把它放在你想要的地方（别忘了给它做样式等等）...转到：app/design/frontend/default/[THEME NAME]/template/catalogsearch/form.mini.phtml并在输入后添加以下代码：

<div id="searching" style="display: none;">
    <img alt="" src="ajax-loader.gif">
</div>

是的。

Scriptaculous Ajax.Autocompleter加载栏

1 个答案: