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

Question

使用 CakePHP 的 Ajax 助手（当前为 1.2.3.8166）提供一个 $ajax->autoComplete 结果列表，如果您使用鼠标（甚至鼠标滚轮），则返回一个结果列表作为呈现的视图滚动结果，一切都很好。另一方面，使用箭头键会产生笨拙地滚动视图的讨厌效果：如果我按下，选择框和整个页面将移动到浏览器视图窗格的底部；向上按压与将其移到顶部的效果相反。

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

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

（只是一个例子，我实际上显示了 id 和 name/surname/commercial name）。

列表的 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，我复制到这里：

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

2. 搜索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;
       }
   },
   

3. 搜索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;
       }
     },
   

4. 搜索 updateChoices 函数并换行

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

   到

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

5. 最后，试试这个行为。如果一开始不起作用，请尝试删除app/tmp/cache 中的缓存文件（或清除您最喜欢的服务器端缓存）、浏览器缓存，然后重试。清除 app/tmp/cache 对我有用。