使用JavaScript将滚动条添加到jQuery自动完成

Question

http://jqueryui.com/autocomplete/#maxheight显示了如何将滚动条添加到jQueryUI自动完成。 它的工作方式与广告相同，但是，如果使用具有不同高度要求的多个自动完成小部件，则很难管理。 对于我的情况，我有各种对话框（都具有相关的高度）并在对话框中具有自动完成小部件。

配置自动完成时（即$( "#tags" ).autocomplete({source: availableTags, ...}); ），是否可以添加滚动条和相关高度？ 可以这样做，从父元素（即对话框）获取高度设置吗？

Answer 1

修改自动完成小部件的简单方法是，在这里向小部件添加一个css类是css

.fixedHeight {
    color:red;
    font-size:10px;
    max-height: 150px;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: auto;
}

在你的js中创建自动完成后，像这样添加fixedHeight类

$( "#courses" ).autocomplete({
//load autocomplete options
});

$( "#courses" ).autocomplete("widget").addClass("fixedHeight");

检查这个工作样本

Answer 2

你必须在jquery-ui.css找到名为.auto-complete的类。 在那里，您可以添加最小高度和最大高度，这将固定自动完成框的最小高度和最大高度的高度。 试试看。

Answer 3

您应该能够在创建项目时将道具添加到项目中。 自动完成将从css获取值，然后使用您设置的值覆盖。 就像是

$( "#tags" ).autocomplete({source: availableTags, ...});
$( "#tags" ).autocomplete("widget").attr("max-height", "5px");

^没有经过测试会在几个方面修补它以获得一个好的工作示例

Answer 4

使用$("#tags2").autocomplete("widget").addClass('fixed-height'); 您可以将高度类添加到自动完成小部件。 如果要设置全局最大高度，可以覆盖css类.ui-autocomplete 。

有关更改高度的一些方法，请参阅以下演示，但我认为最好的是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>