1. 程式人生 > >jQuery UI Autocomplete控制元件下拉列表固定高度

jQuery UI Autocomplete控制元件下拉列表固定高度

jQuery ui Autocomplete控制元件下拉列表高度預設是自適應的,有多少資料就會加載出來多少行。以下是給下拉列表設定一個預設高度並新增滾動條的解決辦法。

  • 在樣式裡新增以下程式碼
.ui-autocomplete {
    max-height: 150px; //預設最大高度150畫素
    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: 150px; //解決IE6下不識別max-height }
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Scrollable results</title
>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .ui-autocomplete { max-height: 150px; //預設最大高度150畫素 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: 150px; //解決IE6下不識別max-height }
</style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( 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 }); } ); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>