使用 JavaScript 向 jQuery 自动完成添加滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28676872/
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
Adding scroll bar to jQuery autocomplete using JavaScript
提问by user1032531
http://jqueryui.com/autocomplete/#maxheightshows how to add a scroll bar to a jQueryUI autocomplete. It works as advertised, however, it is difficult to manage if multiple autocomplete widgets are used which have different height requirements. For my case, I have various dialogs (all with an associated height) and have the autocomplete widgets within the dialog.
http://jqueryui.com/autocomplete/#maxheight展示了如何向 jQueryUI 自动完成添加滚动条。它可以像宣传的那样工作，但是，如果使用具有不同高度要求的多个自动完成小部件，则很难管理。就我而言，我有各种对话框（都具有关联的高度），并且对话框中有自动完成小部件。
When configuring the autocomplete (i.e. $( "#tags" ).autocomplete({source: availableTags, ...});), could the scroll bar and associated height be added? Could it be done so where it takes the height setting from the parent element (i.e. the dialog)?
配置自动完成（即$( "#tags" ).autocomplete({source: availableTags, ...});）时，是否可以添加滚动条和相关高度？在从父元素（即对话框）获取高度设置的地方可以这样做吗？
回答by Srinivas Rampelli
Simple way to modify the autocomplete widget, add a css class to widget here is the css
修改自动完成小部件的简单方法，向小部件添加一个 css 类，这里是 css
.fixedHeight {
color:red;
font-size:10px;
max-height: 150px;
margin-bottom: 10px;
overflow-x: auto;
overflow-y: auto;
}
after creating autocomplete in your js add the fixedHeight class like this
在你的 js 中创建自动完成后，像这样添加 fixedHeight 类
$( "#courses" ).autocomplete({
//load autocomplete options
});
$( "#courses" ).autocomplete("widget").addClass("fixedHeight");
check this working sample
检查这个工作 样本
回答by Harsha KN
You have to find the class named .auto-completein jquery-ui.css. There you can add min-height and max height which will fix the height for minimum height and maximum height of the autocomplete box. Give it a try.
你必须找到指定的类.auto-complete在jquery-ui.css。在那里您可以添加最小高度和最大高度，这将固定自动完成框的最小高度和最大高度的高度。试一试。
回答by workabyte
you should be able to add the prop to the item itself when creating it. The auto complete will get the value from the css then override with the value you set. Something like
您应该能够在创建项目时将道具添加到项目本身。自动完成将从 css 获取值，然后用您设置的值覆盖。就像是
$( "#tags" ).autocomplete({source: availableTags, ...});
$( "#tags" ).autocomplete("widget").attr("max-height", "5px");
^ not tested will tinker with it in a few to get a good working example
^ 未经测试将在少数情况下对其进行修补以获得良好的工作示例
回答by AWolf
With $("#tags2").autocomplete("widget").addClass('fixed-height');you can add a height class to the autocomplete widget.
If you want to set a global max-height you could override the css class .ui-autocomplete.
有了$("#tags2").autocomplete("widget").addClass('fixed-height');你可以添加一个高度类的自动完成构件。如果要设置全局最大高度，可以覆盖 css class .ui-autocomplete。
See the following demo for some ways to change the height but I think the best will be addClass. (You can find the fiddle with the same code here)
有关更改高度的一些方法，请参阅以下演示，但我认为最好的方法是 addClass。（您可以在此处找到具有相同代码的小提琴）
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$("#tags").autocomplete({
source: availableTags
});
$("#tags2").autocomplete({
source: availableTags
});
$("#tags3").autocomplete({
source: availableTags
});
$("#tags2").autocomplete("widget").addClass('fixed-height');
$("#tags3").autocomplete("widget").attr('style', 'max-height: 400px; overflow-y: auto; overflow-x: hidden;')
}); .ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* 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;
}
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<div class="ui-widget">
<label for="tags">Tags max-height set with class .ui-autocomplete:</label>
<input id="tags" />
</div>
<div class="ui-widget">
<label for="tags">Tags max-height set manually with class fixed-height:</label>
<input id="tags2" />
</div>
<div class="ui-widget">
<label for="tags">Tags max-height set with jQuery:</label>
<input id="tags3" />
</div>