jQueryUI 自动完成组合框太长

Posted 2023-03-05

【中文标题】jQueryUI 自动完成组合框太长

【英文标题】：jQueryUI Autocomplete ComboBox Too Long

【发布时间】：2012-02-29 06:21:54

【问题描述】：

我的 jQuery UI AutoComplete ComboBox 在右侧没有滚动条，并且非常长，不幸的是，如下所示。我想把这个列表限制在一个合理的范围内——有什么想法可以实现吗？谢谢！

【问题讨论】：

Limit the result in jQuery Autocomplete 的可能重复项

【参考方案1】：

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

【参考方案2】：

您可以通过 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;

【讨论】：

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

【参考方案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;

【参考方案4】：

在某些时候，这又发生了变化，从 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;

【参考方案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");

【参考方案6】：

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

这样就可以了。没有水平滚动条。