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

最新推荐文章于 2025-05-16 15:26:54 发布

TeamMicLee

最新推荐文章于 2025-05-16 15:26:54 发布

阅读量3.1k

点赞数 1

分类专栏：控件使用文章标签： jquery ui

控件使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过CSS样式设置jQuery UI Autocomplete组件的最大高度，并添加垂直滚动条以改善用户体验。提供了解决方案及兼容IE6的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
  }

官方源码[http://jqueryui.com/autocomplete/#maxheight ]

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