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

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

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

来源

2015-02-23 user1032531

您必须在jquery-ui.css中找到名为.auto-complete的类。您可以在其中添加最小高度和最大高度，以确定自动填充框的最小高度和最大高度的高度。试一试。

来源

2015-02-23 15:47:41

这是事实，但他们似乎正在寻找有不同的最大为每弹出，这种方法会改变最大为所有它不会？也认为它更好地添加另一个.css文件并覆盖，以便用nuget更新jQuery的css文件不会被跳过 – workabyte 2015-02-23 15:50:32

是的，它会。然后再一次，你必须唯一标识每个“自动完成”并为它们分配高度 – 2015-02-23 15:55:13

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

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

^没有测试将与它在鼓捣一些东西以获得良好的工作示例

来源

2015-02-23 15:49:47 workabyte

我喜欢这个解决方案，但是，它将'max-height'属性应用于'input'元素而不是'ul'元素。 – user1032531 2015-02-23 16:42:43

@ user1032531，是没有得到测试。张贴让你去一个可用的方向。看看你发布的例子，看起来你现在正在使用第三个例子，或者我错过了什么？ – workabyte 2015-02-23 16:57:36

随着$("#tags2").autocomplete("widget").addClass('fixed-height');可以高度类添加到自动完成构件。如果你想设置一个全局最大高度，你可以覆盖css类.ui-autocomplete。

请参阅以下演示了解更改高度的一些方法，但我认为最好的方法是addClass。（你可以用相同的代码here找到小提琴）

$(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 { 
 
\t \t \t padding: 1px; 
 
\t \t \t max-height: 200px; 
 
\t \t \t overflow: auto; 
 
\t \t }

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

来源

2015-02-23 16:03:47 AWolf

但通过自动完成表不能正常工作使用箭头上/下滚动滚动 – 2017-05-28 10:16:20

简单的方法来修改自动完成构件，添加一个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

来源

2015-11-18 09:14:31

这工作。谢谢 – 2017-04-30 16:50:10

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

回答

相关问题