JQuery UI 自动完成 (1.8) 滚动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9282320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:35:19  来源:igfitidea点击:

JQuery UI Autocomplete (1.8) scroll

jqueryjquery-uiscrolljquery-ui-autocompletejquery-scrollable

提问by Andreu Ramos

i'm having troubles configuring the autocomplete module of JQuery-UI. I need that when the amount of data to select is big enough an scroll bar appears.

我在配置 JQuery-UI 的自动完成模块时遇到了麻烦。我需要当要选择的数据量足够大时会出现滚动条。

This is what i tried:

这是我试过的:

  • in the jquery-ui-1.8.16.cssi've set this:
  • jquery-ui-1.8.16.css我设置了这个:
ui.autocomplete{
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

*as shown in the ui-documentationexample

*如用户界面文档示例中所示

This is how i declare and autocomplete input:

这就是我声明和自动完成输入的方式:

$("#myInput").autocomplete({
    source: mySource,
    minLength: 0,
});

I dont know why the scroll bar does not appear, any help would be appreciated. Thank you very much!

我不知道为什么滚动条没有出现,任何帮助将不胜感激。非常感谢!

回答by Nicola Peluchetti

You should override the css setting it in the page like this

您应该像这样覆盖页面中的 css 设置

<style>
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 100px;
}
</style>

instead of changing values in jquery-ui-1.8.16.css

而不是改变值 jquery-ui-1.8.16.css