Question

我对jQuery组合框有奇怪的行为。组合框不是常规的jQuery插件，但可以使用自动完成插件实现。他们在jQuery ui site上有一个例子。

我将自动完成设置为最大高度和滚动条：

ul.ui-autocomplete {
    max-height: 200px;
    overflow: auto;
}

这给了我一个工作示例，如this jsFiddle所示。风格是我添加的。在Chrome和Firefox中，一切都在继续。

在IE10中，它可以正常工作，但是当您第一次滚动（单击向下箭头）时，它似乎会选择第一个项目并再次向上滚动。之后，您可以继续正常工作。

可能导致此行为的原因是什么可以修复？

修改

我怀疑它是某种类型的错误。当我使用jQuery 1.7.1和jQuery UI 1.8.16时，它可以工作（正如你在this fiddle中看到的那样）。但是使用jQuery 1.10.3和jQuery UI 1.9.1，我遇到了上述问题。

编辑2

显然，这不是组合框代码中的错误。据我所知，它是从jQuery UI 1.8到1.9引入的。我有filed a bug。

Answer 1

我有同样的问题。我在jquery.ui.menu.js中将问题过滤为_scrollIntoView（自动填充使用ui.menu）。

_scrollIntoView: function (item) {
    var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
    if (this._hasScroll()) {
        borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0;
        paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0;
        offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
        scroll = this.activeMenu.scrollTop();
        elementHeight = this.activeMenu.height(); 
        itemHeight = item.height();
        if (offset < 0) {
            this.activeMenu.scrollTop(scroll + offset);
        } else if (offset + itemHeight > elementHeight) {
            this.activeMenu.scrollTop(scroll + offset - elementHeight + itemHeight);
        }
    }
},

IE中的{p> offset为负数，因此scroll + offset始终为0左右。此强制滚动到顶部。在非IE中，偏移是正的，所以这里没有什么奇怪的事情发生。

我通过覆盖_scrollIntoView（请参阅http://jsfiddle.net/KdDfp/9/）

修复了此问题

var menu = $(this.input.autocomplete("widget")).data("ui-menu");
    var originalScrollIntoView = menu._scrollIntoView;
    menu._scrollIntoView = function (item) {
        if (this._hasScroll()) {`enter code here`
            borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0;
            paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0;
            var offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
            if (offset < 0) {
                // Glitchy 'offset', do nothing.
                return;
            }
        }
        originalScrollIntoView.apply(this, arguments);
    };

希望这有帮助。

Answer 2

此问题已在jQuery 1.12.2中修复。如果您仍使用1.x版本，建议您升级，因为1.x和2.x不再接收更新。

jQuery组合框（带有自动完成功能）在IE中滚动到顶部

2 个答案: