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

Adding scroll bar to jQuery autocomplete using JavaScript

本文关键字：添加 滚动条 JavaScript jQuery 使用      更新时间：2024-04-12

http://jqueryui.com/autocomplete/#maxheight显示了如何向jQueryUI自动完成添加滚动条。它可以像广告中所说的那样工作，但是，如果使用多个具有不同高度要求的自动完成小部件，则很难进行管理。对于我的例子，我有各种对话框（都有相关的高度），并且在对话框中有自动完成的小部件。

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

修改自动完成小部件的简单方法，向小部件添加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");

检查此工作样本

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

使用$("#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>

创建道具时，您应该能够将其添加到项目本身。自动完成将从css中获取值，然后用您设置的值覆盖。类似的东西

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

^未经测试的将在几分钟内对其进行修补，以获得一个良好的工作示例

相关文章：