如何使用 max-height 和 Overflow-y: 滚动自动滚动 GWT SuggestBox？

Question

如何在持有 SuggestBox 的 PopupPanel 上设置最大高度来自动滚动 GWT SuggestBox？目前，当用户按键盘向上键和向下键时，建议项目的样式会发生变化，并且按 Enter 键将选择列表中当前选定的项目。

当项目位于低于最大高度时，滚动条不会滚动。 我尝试扩展 SuggestBox 和内部类 DefaultSuggestionDisplay 来覆盖 moveSelectionDown() 和 moveSelectionUp() 以显式调用 <代码>popup.setScrollTop()。

为了做到这一点，我需要访问当前选定的 MenuItem 的绝对顶部，因此需要访问 SuggestionMenu 它也是 SuggestBox 的内部类，它是私有的并声明为DefaultSuggestionDisplay 中的私有成员，不带 getter。由于 GWT 是 JavaScript，我们无法使用反射来访问它......有人有解决此问题的方法吗？

谢谢。

Answer 1

我一直在四处寻找，但找不到合适的解决方案（除了重新实现 SuggestBox 之外）。以下内容避免重新实现 SuggestBox：

private static class ScrollableDefaultSuggestionDisplay extends SuggestBox.DefaultSuggestionDisplay {

    private Widget suggestionMenu;

    @Override
    protected Widget decorateSuggestionList(Widget suggestionList) {
        suggestionMenu = suggestionList;

        return suggestionList;
    }

    @Override
    protected void moveSelectionDown() {
         super.moveSelectionDown();
         scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
         super.moveSelectionUp();
         scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        //                                     DIV          TABLE       TBODY       TR's
        NodeList<Node> trList = suggestionMenu.getElement().getChild(1).getChild(0).getChildNodes();
        for (int trIndex = 0; trIndex < trList.getLength(); ++trIndex) {
            Element trElement = (Element)trList.getItem(trIndex);
            if (((Element)trElement.getChild(0)).getClassName().contains("selected")) {
                trElement.scrollIntoView();

                break;
        }
    }
}

}

Answer 2

根据 Google 网上论坛的此讨论，我实现了类似的解决方案由于使用了 JSNI 而更加简洁：

private class ScrollableDefaultSuggestionDisplay extends DefaultSuggestionDisplay {

    @Override
    protected void moveSelectionDown() {
        super.moveSelectionDown();
        scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
        super.moveSelectionUp();
        scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        getSelectedMenuItem().getElement().scrollIntoView();
    }

    private native MenuItem getSelectedMenuItem() /*-{
        var menu = this.@com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay::suggestionMenu;
        return [email protected]::selectedItem;
    }-*/;
}

Answer 3

好吧，我终于找到了解决方案。我必须基于 GWT SuggestBox 实现创建自己的建议框。但在自定义实现中请遵循以下步骤：
-将 ScrollPanel 放置到 PopupPanel，然后将 MenuBar 放置到 ScrollPanel
- 在新的内部 SuggestionDisplat 实现的 moveSelectionUp() 和 moveSelectionDown() 中添加以下代码：

 panel.ensureVisible( menu.getSelectedItem( ) );

这无法通过扩展 SuggestBox 来实现，因为我们无法访问选定的内容
MenuItem 除非重写受保护的 getSelectionItem() 方法作为公共方法。

最后添加 CSS:

max-height: 250px;

到显示实现中的 popupPanel 中。