使用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自動完成

回答

相關問題