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

Question

使用 CakePHP 的 Ajax 助手(当前为 1.2.3.8166)提供一个 $ajax->autoComplete 结果列表，如果您使用鼠标(甚至鼠标滚轮)，则返回一个结果列表作为渲染 View 滚动结果，一切都很好。另一方面，使用箭头键会产生笨拙地 ScrollView 的恶劣效果:如果我按下，选择框和整个页面将移动到浏览器 View Pane 的底部；向上按具有将其移动到顶部的相反效果。

有没有其他人注意到这种行为，并想到了什么？结果列表由以下代码提供(从 Controller 中的 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 对我有用。