css - 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上找到）。海报指向此页面的解决方案，我将其复制在这里：

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对我有用。