Question

使用CakePHP的Ajax帮助程序（目前为1.2.3.8166）提供$ ajax-＆gt; autoComplete结果列表，并将结果列表作为渲染视图返回，如果使用鼠标（甚至是鼠标滚轮））滚动结果，一切都很好。另一方面，使用箭头键会产生令人讨厌的滚动视图的效果：如果我按下，选择框和整个页面将移动到浏览器视图窗格的底部;向上按压会产生与将其移到顶部相反的效果。

有没有人注意到这种行为，并想到了什么？结果列表由例如此代码提供（这从控制器中的autoComplete（）函数获取$ people）：

<ul>
<?php foreach($people as $person): ?>
<li><?php echo $person['Person']['id']; ?></li>
<?php endforeach; ?>
</ul>

（只是一个例子，我实际上显示了id和姓名/商号名称）。

列表的CSS如下：

div.auto_complete {
    position: absolute;
    width: 250px;
    background-color: white;
    border: 1px solid #888;
    margin: 0px; padding: 0px;
}
div.auto_complete ul{
    list-style: none;
    margin: 0px;
}

Answer 1

我在cake-php新闻组（http://groups.google.com/group/cake-php上提供）收到了这个问题的答案。海报指向this page with the solution，我在这里复制：

打开controls.js文件（应该在app/webroot/js）

搜索markPrevious函数并将其更改为：

markPrevious: function() {
    if (this.index > 0) {
        this.index--;
    } else {
        this.index = this.entryCount-1;
        this.update.scrollTop = this.update.scrollHeight;
    }
    selection = this.getEntry(this.index);
    selection_top = selection.offsetTop;
    if (selection_top < this.update.scrollTop) {
        this.update.scrollTop = this.update.scrollTop-
        selection.offsetHeight;
    }
},

搜索markNext函数并将其更改为：

markNext: function() {
    if(this.index < this.entryCount-1) {
        this.index++;
    } else {
        this.index = 0;
        this.update.scrollTop = 0;
    }
    selection = this.getEntry(this.index);
    selection_bottom = selection.offsetTop+selection.offsetHeight;
    if(selection_bottom > this.update.scrollTop+this.update.offsetHeight) {
        this.update.scrollTop = this.update.scrollTop + selection.offsetHeight;
    }
  },

搜索updateChoices函数并更改行

this.stopIndicator();
this.index = 0;

到

this.stopIndicator();
this.update.scrollTop = 0;
this.index = 0;

最后，试试这个行为。如果它最初不起作用，请尝试删除app/tmp/cache中的缓存文件（或清除您喜欢的服务器端缓存），浏览器缓存，然后重试。清算app/tmp/cache为我工作。

使用Script.aculo.us / CakePHP自动完成结果列表滚动问题

1 个答案: