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

私は同じ問題を抱えています。jquery.ui.menu.js で問題をフィルタリングし_scrollIntoViewました (オートコンプリートは ui.menu を使用します)。

_scrollIntoView: 関数 (アイテム) {
    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;
        オフセット = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
        scroll = this.activeMenu.scrollTop();
        elementHeight = this.activeMenu.height();
        itemHeight = item.height();
        if (オフセット < 0) {
            this.activeMenu.scrollTop(スクロール + オフセット);
        } そうでなければ (オフセット + itemHeight > elementHeight) {
            this.activeMenu.scrollTop(scroll + オフセット - elementHeight + itemHeight);
        }
    }
}、

offsetIE では負なので、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 に答える