jQueryUI自动完成ComboBox太长

Question

我的jQuery UI AutoComplete ComboBox在右侧没有滚动条，并且非常不可思议，如下所示。我想将这个列表限制在一个合理的长度 - 有关如何实现这一点的任何想法？谢谢！

Answer 1

您可以通过CSS设置高度：

.ui-autocomplete {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

Answer 2

这是一个老问题，所以虽然j08691的解决方案适用于较旧的Primefaces，但现在类名已更改为＆＃34; ui-autocomplete-list＆＃34;：

.ui-autocomplete-list {
    max-height: 400px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

Answer 3

在某些时候，这种情况再次发生了变化，从jQuery-UI 1.12.1开始，该类是'ui-autocomplete.ui-front'，因此接受的答案变为：

.ui-autocomplete.ui-front {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

Answer 4

开始研究CSS。下拉列表很可能是select或ul。如果下拉列表包含在DIV中，请添加“overflow：auto”，这将为其提供滚动条。或者将最大高度设置为div。另一种解决方案是对结果进行限制。只是不要用那么多条目填充这个框。

Answer 5

创建自己的扩展程序并添加所需的方法：

$.widget("custom.combobox",
$.custom.combobox,
{
    //Extension metod to add custom css to input
    addInputCss: function (css) {
        this.input.addClass(css);
    },

    //Extension metod to add custom css to menu (opened select list)
    addMenuCss: function (css) {
        $(this.input.autocomplete("instance").menu.element).addClass(css);

    },
});

样品用量：

$("#yourSelectId").combobox().combobox("addInputCss","yourInputCss").combobox("addMenuCss","yourMenuCss");

Answer 6

.ui-autocomplete {
    overflow-y: auto;
    height: 300px;
    overflow-x: hidden;
}

这可以解决问题。没有水平滚动条。