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

检查此工作sample

Answer 2

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

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。（你可以找到相同代码here）

的小提琴

＆＃13;

$(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;')
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: