代码之家 › 专栏 › 技术社区 › Adriano Varoli Piazza

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

scriptaculous scroll autocomplete cakephp css

Adriano Varoli Piazza · 技术社区 · 15 年前

使用Ajax helper for CakePHP(目前为1.2.3.8166)提供$Ajax->自动完成结果列表,并将结果列表作为渲染视图返回,如果使用鼠标(甚至鼠标滚轮)滚动结果,则一切正常。另一方面,使用箭头键会产生笨拙地滚动视图的恶劣效果:如果我按下,选择框和整个页面将移动到浏览器视图窗格的底部;向上按压具有将其移动到顶部的相反效果。

有没有其他人注意到这种行为,并想到了什么?结果列表由以下代码提供(例如,该代码从控制器中的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;
}

1 回复 | 直到 15 年前

Adriano Varoli Piazza 15 年前

我在cake php新闻组(可在 http://groups.google.com/group/cake-php ). 海报指向 this page with the solution ,我复制到这里:

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

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

到

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

最后,尝试这种行为。如果一开始不起作用,请尝试删除中的缓存文件 app/tmp/cache app/tmp/cache 为我工作。