0

我对 jQuery 组合框有奇怪的行为。组合框不是常规的 jQuery 插件，但可以通过自动完成插件来实现。他们在jQuery ui 站点上有一个示例。

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

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

这给了我一个在这个 jsFiddle中看到的工作示例。样式是我添加的所有内容。在 Chrome 和 Firefox 中，一切正常。

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

什么可能导致这种行为，它可以修复吗？

编辑

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

编辑 2

显然，这不是组合框代码中的错误。据我所知，它是从 jQuery UI 1.8 到 1.9 引入的。我已经提交了一个错误。

4

2 回答 2

1

我有同样的问题。我_scrollIntoView在 jquery.ui.menu.js 中过滤了问题（自动完成使用 ui.menu）。

_scrollIntoView：功能（项目）{
    var borderTop, paddingTop, 偏移量, 滚动, 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;
        滚动 = this.activeMenu.scrollTop();
        elementHeight = this.activeMenu.height();
        itemHeight = item.height();
        如果（偏移量 < 0）{
            this.activeMenu.scrollTop(scroll + offset);
        } else if (offset + itemHeight > elementHeight) {
            this.activeMenu.scrollTop(scroll + offset - elementHeight + itemHeight);
        }
    }
},

offset在 IE 中为负数，因此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);
    };

希望这可以帮助。

于 2014-04-08T08:07:47.037 回答
0

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

于 2019-12-05T09:44:54.833 回答