jQueryUI自动完成组合框过长

Question

我的jQuery UI自动完成ComboBox没有右侧的滚动条，并且如下所示非常长。我希望将此列表限制为合理的长度-有什么想法可以实现吗？谢谢！

- Richard

---

可能是Limit the result in jQuery Autocomplete的重复问题。 - Didier Ghys

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;
}

- j08691

---

CSS类现在被命名为ui-autocomplete-list。 - user566057

Answer 2

在某个时候，这种情况再次发生了改变。从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;
}

- adejones

Answer 3

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

.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;
}

- user566057

Answer 4

开始查看 CSS。很可能下拉菜单是选择框或 ul 列表。如果下拉菜单被包含在 DIV 中，请添加“overflow:auto”，这将为其提供滚动条。或者将 DIV 的最大高度设置为一定值。另一个解决方案是限制结果的数量。只需不要向框中填充太多条目即可。

- Churk

Answer 5

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

这样就可以了。而且不会出现水平滚动条。

- Hiran D.A Walawage

Answer 6

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

$.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");

- Uri Gorobets